JavaScript 手写防抖和节流

防抖

描述：触发高频事件 N 秒后再执行，如果 N 秒内事件再次触发，则会重新计时。比如使用搜索引擎进行搜索提示，控制发送请求的次数，不至于每输入一个字符就发送一次请求。
核心思想：每次事件触发就清除原来的定时器，建立新的定时器。

// 会将传入的函数包装成为防抖的函数，后续直接调用即可
function debounce(fn,time){
    // 定义一个计时器
    let timer = null
    return function(...args){
        if(timer){
            // 如果前面还有定时器，则清空
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            // 每隔一段时间调用该函数
            fn.apply(this,args)
        },time)
    }
}
// 测试一下
let fn = debounce((x) => {
    console.log(x)
},2000)

测试结果表明，当高频次调用某一函数时，只有规定时间内最后一次调用会生效：

节流

描述：单位时间内，只触发一次函数，如果多次触发，则只有一次生效。

// 节流
// 将传入的函数包装成节流函数，规定时间内只执行一次
function throttle(fn,time){
    // 设置一个标志，记录现在是否能够执行该函数
    let flag = true
    return function(...args){
        if(!flag){
            // 如果flag为false，说明现在不能执行
            return
        }
        flag = false
        setTimeout(() => {
            fn.apply(this,args)
            // 当执行结束后才重新赋予权限
            flag = true
        },time)
    }
}
// 测试一下
 let fn = throttle((x) => {
     console.log(x)
 },2000)
fn('第一次')
fn('第二次')
fn('第三次')

测试可得，同一时间段内多次执行fn，只有一次生效了

区别：假设一个用户一直触发这个函数，且每次触发函数的间隔小于设置的时间，防抖的情况下只会调用一次，而节流的情况会每隔一定时间调用一次函数。