js定时器的用法，解决多次点击/触发定时器越走越快的问题

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秒才会进行下一次执行

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