js基础篇~定时器

七夏（UID：1） · 发表于 2024-10-17 19:57:05

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

×

一、setTimeout() 方法用来定义一个定时器

setTimeout() 方法用于在指定的毫秒数后执行一次函数。
语法：setTimeout(function, delay[, arg1, arg2,...])。其中，function 是要执行的函数，delay 是延迟的毫秒数，后面的参数是传递给函数的参数。
例如：

function sayHello() {
     console.log('Hello!');
   }
   setTimeout(sayHello, 2000); // 2 秒后执行 sayHello 函数

二、setInterval()

setInterval() 方法用于按照指定的时间间隔重复执行函数。
语法：setInterval(function, delay[, arg1, arg2,...])。参数与 setTimeout() 相同。
例如：

 function updateClock() {
     // 更新时钟显示的代码
   }
   setInterval(updateClock, 1000); 
   // 每 1 秒执行一次 updateClock 函数

三、清除定时器

可以使用 clearTimeout() 和 clearInterval() 方法来清除已经设置的定时器。
例如：

 let timerId = setTimeout(sayHello, 2000);
   // 某些情况下需要清除定时器
   clearTimeout(timerId);

let intervalId = setInterval(updateClock, 1000);
   // 停止时钟更新
   clearInterval(intervalId);

定时功能在 Js中非常有用，可以帮助你实现各种动态效果和定时任务。但在使用时要注意合理设置时间间隔，避免过度消耗资源或影响性能。同时，要确保在不需要定时器时及时清除它们，以防止内存泄漏。

以下是一些 JavaScript 定时功能的案例：

案例一：定时显示问候语

function showGreeting() {
  console.log('Hello! This greeting is displayed after 3 seconds.');
}


setTimeout(showGreeting, 3000);

案例二：倒计时

let seconds = 10;


function countdown() {
  if (seconds > 0) {
    console.log(`Seconds remaining: ${seconds}`);
    seconds--;
    setTimeout(countdown, 1000);
  } else {
    console.log('Countdown finished!');
  }
}


setTimeout(countdown, 1000);

案例三：定时切换图片

假设页面中有一个 <img> 元素，其 id 为 image。



<img id="image" src="image1.jpg" alt="Image">




let imageIndex = 0;
const images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];


function changeImage() {
  const imageElement = document.getElementById('image');
  imageElement.src = images[imageIndex];
  imageIndex = (imageIndex + 1) % images.length;
  setTimeout(changeImage, 2000);
}


setTimeout(changeImage, 2000);

案例四：在线时钟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>


<body>
<div id="clock"></div>


<script>
    function updateClock() {
        const now = new Date();
        const hours = now.getHours().toString().padStart(2, '0');
        const minutes = now.getMinutes().toString().padStart(2, '0');
        const seconds = now.getSeconds().toString().padStart(2, '0');
        const timeString = `${hours}:${minutes}:${seconds}`;
        document.getElementById('clock').textContent = timeString;
    }


    setInterval(updateClock, 1000);
    updateClock(); // 立即显示一次时间
</script>
</body>


</html>

最后再来聊一聊使用定时器可能会遇到的一些常见错误：

一、忘记清除定时器尤其是新手特别容易忘记

如果不及时清除定时器，可能会导致内存泄漏和性能问题。特别是在定时器不再需要时，应使用 clearTimeout() 或 clearInterval() 清除定时器。
例如：

 let timerId = setTimeout(function() {
     console.log('This will run after 2 seconds.');
   }, 2000);


   // 某些情况下忘记清除定时器
   // clearTimeout(timerId);

二、定时器延迟不准确

浏览器中的定时器并不保证完全准确的延迟时间。由于浏览器的其他任务和事件处理，定时器可能会延迟执行。
例如，设置一个定时器为每 100 毫秒执行一次任务，但实际执行时间可能会有所偏差。
在对时间精度要求较高的场景下，可能需要考虑其他解决方案或进行时间补偿。

三、在定时器函数中引用外部变量的问题

如果在定时器函数中引用外部变量，可能会因为变量的值在定时器执行之前发生变化而导致意外的结果。
例如：

let count = 0;
   setInterval(function() {
     console.log(count);
   }, 1000);


   // 在定时器执行之前，count 可能会被其他代码修改
   count = 10;

四、嵌套定时器导致的混乱

过多地嵌套定时器可能会使代码变得复杂和难以维护，并且容易出现错误。
例如：

setTimeout(function() {
     console.log('First timer.');
     setTimeout(function() {
       console.log('Second timer.');
       // 可能会继续嵌套更多定时器
     }, 1000);
   }, 2000);

五、定时器与异步操作的冲突

如果在定时器执行期间有异步操作正在进行，可能会导致不可预测的结果。
例如，定时器触发时，一个异步函数正在等待数据返回，而定时器函数可能会在数据返回之前执行，导致错误的逻辑。
在处理异步操作时，需要确保定时器与异步操作的协调和正确的顺序执行。

js基础篇~定时器

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

快速回帖

分享帝

龙年限定

关于楼主

商务推广