计时器方法 防抖节流

一、计时器方法概述

计时器方法可以实现在指定的时间过后，单次或重复调用函数的功能，setTimeout可以实现函数在指定毫秒数后单次执行，setInterval可以实现函数在指定毫秒数后重复执行，语法如下所示：

setTimeout(function(){
    //一秒后执行
},1000);

setInterval(function(){
    //一秒后执行，并且每隔一秒重复执行
},1000)

二、setTimeout

下面我们来实现一个效果，页面加载3秒后在控制台输出hello world

setTimeout(function(){
    console.log("hello world");
},3000)

当计时器开始计时后，我们可以使用clearTimeout方法让计时器停下来，下面我们来定义一个按钮，当页面加载后，如果我们在3秒钟之内点击按钮，计时器会停止，不会输出hello world，如果不点击按钮，3秒钟之后就会输出hello world

var btn = document.querySelector("button");
var t = setTimeout(function(){
    console.log("hello world");
},3000)
btn.onclick = function(){
    clearTimeout(t);
}

setTimeout方法会返回一个整数类型的值，通过这个值，我们可以停止计时器,我们将setTimeout方法的返回值赋值给一个变量，当点击按钮的时候，使用clearTimeout方法，传入t，这样计时器就会停止，hello world就不会在控制台输出。

三、setInterval

setInterval的用法与setTimeout的用法非常类似，都是传入两个参数，第一个参数是计时器执行的函数，第二个参数是毫秒数。下面我们来实现一个效果，每3秒钟在控制台输出依次hello world

setInterval(function(){
    console.log("hello world");
},3000)

从代码可以看出，setInterval与setTimeout完全相同，区别在于setInterval参数中的函数没个指定毫秒数后都会重复执行，当我们不希望计时器重复执行的时候，就可以使用clearInterval方法来停止计时器

var btn = document.querySelector("button");
var t = setInterval(function(){
    console.log("hello world");
},3000)
btn.onclick = function(){
    clearInterval(t);
}

下面我们来实现一个效果，让控制台输出每隔1秒按顺序输出正整数，从数字1开始输出

var n = 1;
function showNumber(){
    co