当前位置: 首页 > 编程笔记 >

浅谈JavaScript中setInterval和setTimeout的使用问题

全鸿晖
2023-03-14
本文向大家介绍浅谈JavaScript中setInterval和setTimeout的使用问题,包括了浅谈JavaScript中setInterval和setTimeout的使用问题的使用技巧和注意事项,需要的朋友参考一下

说到setInterval,就不得不提到setTimeout,二者都是用于定时执行某函数,区别在于setTimeout 只执行一次,而setInterval可以一直连续不断执行下去,典型用法如下:

function do_sth() { console.log('Hello...'); }

setTimeout(do_sth, 2500);  // 2.5 秒后,执行 do_sth 函数(只执行一次)
setInterval(do_sth, 3500); // 3.5 秒后,执行 do_sth 函数(每隔 3.5 秒执行一次,一直执行下去)

表面看上去,二者各有各的用途,没什么问题。但是如果setInterval所执行的函数是比较耗时的动作,setInterval仍然会按照原计划安排调用那个函数,而不考虑之前的任何阻塞,这样随着时间的推移,队列中等待执行的函数就会越来越多。而对于此问题解决方案仍然是采用递归调用setTimeout 的方法,如:

function do_sth() {
 console.log('Hello...');  // 即使这里执行比较耗时的动作也没问题,
                  // 等这里执行完了才会再去调用 setTimeout

 setTimeout(do_sth, 2500); // 安排后续执行
}

do_sth();             // 初次执行

这种递归调用的方式,既可以达到循环执行某函数的目的,有可以防止后续任务不断堆积。

如果你觉得这种方式有点罗嗦,还可以再写得精炼一些:

(function() {
 console.log('Hello...');  // do something here
 setTimeout(arguments.callee, 2500);
})();

说是这么说,但是如果定时执行的任务开销很少,setInterval一般是没什么问题的,但是如果任务开销比较大,请务必使用setTimeout。

 类似资料:
  • 问题内容: 据我所知,这两段JavaScript的行为方式相同: 选项A: 选项B: 使用setTimeout和setInterval之间有什么区别? 问题答案: 他们本质上试图做同样的事情,但是这种方法比该方法更加准确,因为要等待1000ms,然后运行该函数,然后设置另一个超时。因此,等待时间实际上超过了1000毫秒(如果函数执行时间较长,则等待时间会更长)。 尽管有人可能会认为将执行完全相同每

  • 由于 JavaScript 是异步的,可以使用 setTimeout 和 setInterval 来计划执行函数。 注意: 定时处理不是 ECMAScript 的标准,它们在 DOM (文档对象模型) 被实现。 function foo() {} var id = setTimeout(foo, 1000); // 返回一个大于零的数字 当 setTimeout 被调用时,它会返回一个 ID 标

  • 本文向大家介绍setTimeout与setInterval的区别浅析,包括了setTimeout与setInterval的区别浅析的使用技巧和注意事项,需要的朋友参考一下 前言 在制作网页动态效果时,一定会遇到某些需求,要求某段程序等待多时时间后再开始执行,就像在我们的生活中一样,待会儿再开始做一件事。在JavaScript中主要通过定时器实现此类需求,本文将对定时器做一个概括,正对setTime

  • 本文向大家介绍浅谈javascript中的 “ && ” 和 “ || ”,包括了浅谈javascript中的 “ && ” 和 “ || ”的使用技巧和注意事项,需要的朋友参考一下 有时候,我们会在jQuery框架或者其他js插件中发现里面有很多 “ && ” 和 “ || ”,那么这两个标识到底是什么含义?怎么使用?我觉得还是有必要稍微深究一下。 一、原理: && 操作符特点:逻辑运算表达式中

  • 本文向大家介绍浅谈js的setInterval事件,包括了浅谈js的setInterval事件的使用技巧和注意事项,需要的朋友参考一下 setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。 setinterval()用法 setInterval

  • 本文向大家介绍JavaScript中setTimeout和setInterval函数的传参及调用,包括了JavaScript中setTimeout和setInterval函数的传参及调用的使用技巧和注意事项,需要的朋友参考一下 如何向 setTimeout 、 setInterval 传递参数 看如下代码: 这样写是可以正常工作的,但是如其说这是参数传递,还不如说是直接使用的全局变量。所以,这种写