前端名词术语

函数防抖与函数节流

• 函数防抖

业务场景:实时搜索种，用户每输入一个字符就调用接口同步缓存一次的话，这样服务器的压力会比较大。而且多个接口顺序发送出去，服务端不一定是按照这个顺序收到的，可能会导致储存的内容并不是最新的内容。

这时候，就需要选择一个时机去调用接口而不是每次输入都调用，这个时机可以选择在用户停止输入的时候。

那我们怎么知道用户已经停止输入了呢？ 如果N秒内输入框的内容没有发生改变，我们就可以认为用户停止输入或者暂停输入了。

let timer;
    const input = document.querySelector('input');

    input.addEventListener('input', function() {
        clearTimeout(timer);
        timer = setTimeout(function() {
            // 执行具体代码
        }, 500)
    })

• 函数节流

现在要实现一个点赞的功能，某个用户发布了一个动态，大家可以给他无限点赞，也就是说每个点赞后端都要记录下来。理论上来讲用户每点赞一次调用一次接口即可。但是同样的，和上面一样，这样对服务器的压力会比较大。这时候，我们可以通过限制频率的方式来缓解这个情况，比如说点击按钮后300毫秒后再调用接口，在这300毫秒期间所有的点击都会被累计。

    // 点赞数
    let likes = 0;
    // 定时器标识
    let timer;
    
    /*
    * 用户点赞函数
    * */
    function clickButton() {
        likes++;
        
        if ( timer ) return;
        
        timer = setTimeout(() => {
            // 执行网络请求
            // ajax...
            
            // 点赞数重置
            likes = 0;
            
            // 重置timer
            timer = null;
        }, 300)
    }

函数防抖 函数节流
作者：轻言忘语
链接：https://juejin.cn/post/6844903876433281037