js定时器代码

在JavaScript中，有两种常用的定时器方法：setTimeout() 和 setInterval()。

1. setTimeout()

setTimeout() 方法在指定的毫秒数后执行函数或计算表达式。

javascript复制代码
let timerId = setTimeout(function() {  
    console.log('Hello, World!');  
}, 2000); // 2秒后执行

在这个例子中，setTimeout() 会在2秒后执行提供的函数，该函数会在控制台中打印出 "Hello, World!"。setTimeout() 返回一个定时器ID，这个ID可以用于稍后清除定时器（使用 clearTimeout() 方法）。

2. setInterval()

setInterval() 方法会不停地每隔指定的时间间隔执行函数或计算表达式。

javascript复制代码
let intervalId = setInterval(function() {  
    console.log('Hello, World!');  
}, 2000); // 每2秒执行一次

在这个例子中，setInterval() 会每2秒执行一次提供的函数，该函数会在控制台中打印出 "Hello, World!"。setInterval() 同样返回一个定时器ID，这个ID可以用于稍后清除定时器（使用 clearInterval() 方法）。

清除定时器

如果你想要在某个时刻停止定时器，你可以使用 clearTimeout() 或 clearInterval() 方法，并传入定时器的ID。

javascript复制代码
// 清除setTimeout定时器  
clearTimeout(timerId);  
  
// 清除setInterval定时器  
clearInterval(intervalId);

这些定时器方法并不保证精确的延迟或间隔，因为它们受到JavaScript事件循环和浏览器渲染等因素的影响。对于需要精确时间控制的应用，可能需要使用Web Workers或WebAssembly等技术。

在JavaScript中，使用定时器时还有一些重要的注意事项和扩展用法。

注意事项

1. 执行上下文：定时器中的函数会在全局作用域中执行，而不是在定义它的作用域中执行。如果定时器中的函数需要访问外部变量，这些变量必须是全局可访问的，或者使用闭包来捕获所需的作用域。

2. 定时器延迟并非完全准确：由于JavaScript是单线程的，且定时器回调会被添加到事件队列中等待执行，因此实际的执行时间可能会受到其他代码执行和浏览器渲染的影响。

3. 清除不再需要的定时器：为了避免不必要的计算和内存占用，当你不再需要定时器时，应使用 clearTimeout() 或 clearInterval() 清除它。

扩展用法

1. 递归定时器：虽然 setInterval() 本身就是一个递归定时器，但你也可以使用 setTimeout() 来模拟递归行为。这在需要基于前一次执行的结果来动态调整下一次执行时间的情况下非常有用。

javascript复制代码
function recursiveTimeout() {  
    console.log('执行定时器');  
    // 根据某些条件决定是否
javascript复制代码
async function delayedAction() {  
    console.log('开始等待...');  
    await new Promise(resolve => setTimeout(resolve, 2000));  
    console.log('2秒后执行...');  
}  
  
delayedAction();
在这个例子中，delayedAction 是一个异步函数，它使用 new Promise 和 setTimeout 来创建一个延迟2秒的异步操作。await 关键字会暂停 delayedAction 函数的执行，直到Promise解析完成（即定时器回调执行）。
使用JavaScript定时器时，请确保理解它们的行为和工作原理，以便更有效地在你的应用程序中使用它们。

      
Related

html5导航条代码

b/s架构与c/s架构的区别

手机壳定制背景

小程序扫码点餐





热门文章




WordPress app
36






wp小程序插件
25






app 小程序区别
24






网站源码、小程序源码如何选择服务器
20






plt设置画布大小
17




微海报


  

  

  



      



文章目录



注意事项
扩展用法