js定时器的用法，解决多次点击/触发定时器越走越快的问题 |
您所在的位置：网站首页 › 和差化积公式求极限 › js定时器的用法，解决多次点击/触发定时器越走越快的问题 |
|
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秒才会进行下一次执行 这个效果常见的是使用在轮播图的切换图片 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |