什麼是節流和防抖？

限制函式執行次數的方法，屬於效能優化的知識。

節流

把頻率降低，比如說滑鼠連續不斷地觸發某事件（如點選），只在單位時間內只觸發一次。
程式碼如下：
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秒過後才行，否則節點背景色不變。