防抖和节流

防抖和节流

提高代码的执行效率，降低浏览器和服务器的负担

1、防抖

单位时间内，频繁的触发一个事件，只执行最后一次

例如：模糊搜索时，用户输入连续字段后等待一秒后再发起请求，而不是用户输入一个单词就请求一次

就像电梯一样，开门后无人进出几秒后才会关门，期间有人上下，又会重新计算时间，等待几秒后关门

示例代码：

`原理`：在2s内如果用户有输入内容，就不执行定时器函数，不发送请求。2s内用户没有输入内容，就执行定时器，发起请求

// 1、先定义一个空的定时器
let timer = null;

// 2、监听用户的输入事件
input.addEventListener('input', () => {
    // 3、一开始先清空定时器
    clearTimeout(timer);
    // 4、开启新的定时器，2秒后根据输入内容发起请求
    timer = setTimeout(() => {
        console.log('用' + input.value + '发起请求')
    }, 2000)
})

2、节流

单位时间内，频繁的触发一个事件，只执行一次

例如：轮播图的左右切换按钮，一直点不会频繁的切换，而是固定时间内只执行一次

就像游戏内技能cd一样，点一次之后，再怎么点也不会触发技能，只有等cd过了才会执行

示例代码：

`原理`：记录下上一次执行事件的时间，再获取当前事件触发的时间，时间差如果超过了一定事件，才会执行事件，否则不会执行

// 1、先记录上一次执行时间，初始值为null
let preTime = null;

// 2、绑定事件
dom.addEventListener('click', () => {
    // 3、获取当前触发事件的时间
    let currentTime = +new Date();
    // 判断当前事件 - 上一次的时间 是否超过了1s，超过则执行功能代码，并将这一次的当前时间赋值给上一次执行时间
    if(currentTime - preTime > 1000){
        console.log('可以执行对应功能');
        // 4、记录下当前执行时间
        preTime = currentTime
    }
})