节流和防抖

什么是节流和防抖？

限制函数执行次数的方法，属于性能优化的知识。

节流

把频率降低，比如说鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次。
代码如下：
css

div {
        width: 600px;
        height: 600px;
        border: 10px solid red;
        cursor: move;
    }

html

<div></div>

js

const divNode = document.querySelector('div');
        let isChange = true;
        divNode.addEventListener('mousemove', () => {
            if (isChange) {
                isChange = false;
                divNode.style.backgroundColor = `rgb(${Math.floor(Math.random() * 255)},0,0)`;
                setTimeout(() => {
                    isChange = true;
                }, 1000);
            }
        });

在上述代码中，无论鼠标移动多快，divNode的背景颜色都每隔一秒才变。

防抖

不同于节流，只有当用户不再触发这个事件时，才执行一次代码
css、html代码同上
js

 const divNode = document.querySelector('div');
        let timer;

        // 1000ms click 第一个定时器
        // 1500ms click 清除第一个定时器 开启第二定时器
        // 2000ms click 清除第二个定时器 开启第三定时器
        // 1000ms 不再触发这个事件 执行代码

        // 防抖
        divNode.addEventListener('click', () => {
            clearTimeout(timer);
            // 知道用户什么时候停止触发事件
            timer = setTimeout(() => {
                divNode.style.backgroundColor = `rgb(${Math.floor(Math.random() * 255)},0,0)`;

            }, 1000);
        });

在上述代码中，多次点击时，无论点击的再快，下次点击都要等上次点击1秒过后才行，否则节点背景色不变。