定时器越走越快的原因

在上述例子中，本应每1秒输出一次，但在多次点击按钮后会变成每0.9秒、0.8秒、0.7秒… 就输出一次，即定时器时间间隔越来越短，这就是所谓的定时器越走越快。
其实原因很简单，在多次点击按钮时，多次创建了定时器，所以明面上看是“定时器越走越快”，其实是“多次初始化定时器”。 所以并不是定时器越走越快，而是有多个定时器在执行，定时器里面的程序执行的频率提高了。

方式一：因为问题出现在“多次初始化定时器”，那就要在每次初始化定时器之前先执行清除操作，保证只有一个定时器在执行，就不会出现这样的问题了。

var timer = null;

btn.onclick=function(){

if(timer){

clearInterval(timer)

timer = null

}

timer = setInterval(function(){

s--

time.innerText=s

},1000);

}

●setInterval() 会执行多次
●setTimeout() 只会执行一次
方式二：添加一个开关,让这个开关默认为true，第一次点击将其变为false，点击事件的执行需要判断这个开关是否为true，为true执行，false不执行。
解决多次点击问题，定时器执行完毕之后再继续执行下一个定时器。

let btn = document.querySelector('button');

var time;var fls = true

btn.addEventListener('click', function() {

if (fls){

fls = false

time = setInterval(function() {

console.log('1s')

}, 1000)

}

})