当前位置: 首页>前端>正文

JavaScript 定时任务 Out of Memory 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秒才会进行下一次执行

这个效果常见的是使用在轮播图的切换图片



https://www.xamrdz.com/web/2ds1960053.html

相关文章: