19.js定时器,以及解释、解决多次点击/触发定时器越走越快——软设问题总结
- 19.1 js定时器
- 19.2 定时器的使用
- 19.3 定时器越走越快的原因
- 19.4 解决定时器“越走越快”的问题
19.1 js定时器
在菜鸟教程中介绍到:
js 定时器有以下两个方法:
setInterval()
:按照指定的周期(以毫秒计)来调用函数或计算表达式。方法会不停地调用函数,直到clearInterval()
被调用或窗口被关闭。setTimeout()
:在指定的毫秒数后调用函数或计算表达式。
两个方法都有三个参数:
setInterval/setTimeout(code,millisec,lang)
-
code
: 必需。要调用的函数后要执行的 JavaScript 代码串。 -
millisec
: 必需。在执行代码前需等待的毫秒数。 -
lang
: 可选。脚本语言可以是:JScript | VBScript | JavaScript.
19.2 定时器的使用
-
setInterval()
的使用:比如 点击按钮后每3秒 在控制台输出"3s"
let btn = document.querySelector('button');
btn.addEventListener('click', function() {
setInterval(function() {
console.log("3s");
}, 3000)
})
-
setTimeout()
的使用:比如 点击按钮后3秒 在控制台输出“3s”
let btn = document.querySelector('button');
btn.addEventListener('click', function() {
setTimeout(function() {
console.log("3s");
}, 3000)
})
从例子的描述其实就可以看出来,使用 setInterval()
时,每3秒会输出一次,而使用 setTimeout()
时,只会在第一个3秒后输出一次,即
-
setInterval()
会执行多次 -
setTimeout()
只会执行一次
19.3 定时器越走越快的原因
因为
setTimeout()
只会执行一次,所以不会出现越走越快的问题; 那么这个问题就只用讨乱setInterval()
的情况
在上述例子中,本应每3秒输出一次,但在多次点击按钮后会变成每2秒、1秒… 就输出一次,即定时器时间间隔越来越短,就是所谓的定时器越走越快。
- 其实这个原因很简单,在多次点击按钮时,多次创建了定时器,所以明面上看是“定时器越走越快”,其实是“多次初始化定时器”。
- 所以其实并不是定时器越走越快,而是有多个定时器在执行,定时器里面的程序执行的频率提高了
19.4 解决定时器“越走越快”的问题
因为问题出现在“多次初始化定时器”,那就要在每次初始化定时器之前先执行清除操作,保证只有一个定时器在执行,就不会出现这样的问题了。
上述例子修改后的代码如下:
let btn = document.querySelector('button');
let time;
btn.addEventListener('click', function() {
clearInterval(time); //清除之前的定时器
time = setInterval(function() { //初始化现在的定时器
console.log("3s");
}, 3000)
})
注:这样做的结果就是,每点击一次按钮,就会重新等3秒才会进行下一次执行
这个效果常见的是使用在轮播图的切换图片