什么是防抖与节流？
- 防抖
- 节流
- 代码

其实这种文章网上已经烂大街了，但是我还是要自己去手写一遍，一是便于记忆，二是提高自己的理解。

今年四月份在阿里的实习招聘笔试题中，当时就出现了一道节流的题目，但是当时还没有看到这里，于是便稀里糊涂硬着头地写了，没想到当时自己第一次自主思考的节流的实现，居然和标准答案基本一致，还是挺惊讶的，因为之前从来没看过任何相关资料。

什么是防抖与节流？

防抖

先说说防抖。

抖动，可以理解为一次事件的触发。有的事件有高频触发的特点，比如 mousemove，scroll，mousedown 等，尤其是指针移动这个事件，可以一瞬间触发好多次。在有的场景下，每当我们触发一次事件，可能要像服务器发送一些数据，如果如此高频的发送数据，服务器是吃不消的，因此要借助防抖来控制。

在这里插入图片描述

防抖就是防止事件/函数频繁地触发，如果事件被频繁地触发，那么则不执行任何逻辑，只响应最后一次触发并执行相应的逻辑。如果事件一直被触发就一直等待，直到事件超过timeout时长后依然未被触发，则触发。

具体演示见此 CodePen。

节流

节流和防抖很像，防抖是如果重复的事件不断涌入，就一直不执行逻辑，直到一个timeout之后还没有事件触发；而节流是指，在一段timeout时间内之触发一次，直到下一次timeout时间到达，则重新计算。

具体演示见此 CodePen。

代码

具体演示见此 CodePen。

const box = document.getElementById('box');
function move(e) {
    box.innerHTML = `${e.offsetX}, ${e.offsetY}`;
    console.log('1')
}
function debounce (func, delay) {
    let timer;
    return function () {
        clearTimeout(timer);
        timer = setTimeout(() => func.apply(this, arguments), delay);
    }
}
function throttle (func, delay) {
    let lock = false;
    return function () {
        if (lock) return;
        lock = true;
        setTimeout(() => {
            func.apply(this, arguments);
            lock = false;
        }, delay);
    }
}
box.onmousemove = throttle(move, 1000);
box.onmousemove = debounce(move, 1000);

LLwyct 😲

手写实现防抖debounce与节流throttle

什么是防抖与节流？

防抖

节流

代码