二十六、函数节流

26.1 函数节流，设一个变量lock

函数节流：

可以使一些频繁触发的函数事件受到限制，可以使函数在一定的时间之内满足，或者满足某些条件之后再去执行。

• 设一个变量lock，取值是布尔值

  • var lock = true 函数可以执行

  • lock = false 函数不可以执行

举例：

// 定义锁
var lock = true;
$("#btn").click(function(){
    // 函数节流
    if(!lock){
        console.log(1);
		// 遇见return，终止代码执行
        return;
    }
    // 进入之后，关闭锁
    console.log(2);
    lock = false;
    console.log(3);
});

第一次点击，出现2,3

第二次开始，只出现1

26.2 延时器setTimeout(fn,time)

可以比喻成定时炸弹，在一定的时间只会执行一次。

使用方式：

• setTimeout(fn,time)

  • fn：要执行的函数

  • time：要延迟的时间

  • 是window属性，window可以省略

举例：

// 定义锁
var lock = true;
$("#btn").click(function(){
    // 函数节流
    if(!lock){
        // 遇见return，终止代码执行
        return;
    }
    // 进入之后，关闭锁
    lock = false;
    console.log(3);
    // 在3s之后打开锁，使用延时器
    setTimeout(function(){
        // 打开锁
        lock = true;
    },3000);
});

第一次点击，出现3

3s内再次点击，不会出现3

3s后再次点击，出现3