防抖和节流的实现

防抖

1. 概念介绍

在没有使用防抖函数之前：当我们需要搜索某些物体信息时会导致浏览器压力很大，性能很低。"防抖函数"的作用就是等到用户停止输入的时候，才去执行函数，避免了多次执行造成的资源浪费。

防抖函数的定义：
当一个事件被触发准备执行事件处理函数时，会等待一定的时间（由自己设定时长），如果在这段时间内没有被再次触发，那就照常执行函数，如果被再次触发，那么上次触发作废，重新从新触发的时间开始计算，直到最终可以执行。

2. 函数实现

简单实现 :

function debounce(fn, delay) {
     //记录上一次的延时器
     let timer = null
     return function () {
     //清除上一次的延时器
         clearTimeout(timer)
         //重新设置新的延时器
         timer = setTimeout(() => {
            fn.apply(this, arguments)
         }, delay)
    }
}

高阶优化： 第三个参数表示是否需要立即执行，默认不需要

function debounce(func, delay, immediate = false) {
    let timer
    let isRun = false
    return function () {
        // 判断定时器是否为空，如果为空，则会直接执行回调函数
        if (timer) clearTimeout(timer)
        // 判断是否立即执行
        if (immediate && !isRun) {
                func.apply(this, arguments)
                isRun = true
        // 如果没有第三个参数则执行简单版本
        } else {
            timer = setTimeout(() => {
                func.apply(this, arguments)
                isRun = false
            }, delay)
        }
    }
}

3. 应用场景

• 输入框频繁输入、搜索
• 按钮频繁点击、提交信息，触发事件，验证检测
• 窗口大小 resize 变化后，再重新渲染。

节流

1. 概念介绍

事件触发后，规定时间内，事件处理函数不能再次被调用。也就是说在规定的时间内，函数只能被调用一次，且是最先被触发调用的那次。如果这个事件会被频繁触发，那么节流函数会按照一定的频率来执行函数，不管在这个中间有多少次触发这个事件，执行函数的频繁总是固定的。

2. 函数实现

第一种方法：时间戳

function throttle(fn, delay) {
    //记录上一次函数触发的时间
    var lastTime = 0
    return function(){
        //记录当前函数触发的时间
        var nowTime = Date.now()
        if(nowTime - lastTime > delay){
            fn.apply(this, arguments)
            //同步执行结束时间
            lastTime = nowTime
        }
    }
}

第二种方法：定时器

function throttle(fn, delay) {
    let timer = null
    return function () {
        if (!timer) {
            timer = setTimeout(() => {
                fn.apply(this, arguments)
                timer = null
            }, delay);
        }
    }
}

3. 应用场景

• 滚动加载更多
• 搜索框搜的搜索联想功能
• 高频点击
• 表单重复提交