Javascript-函數節流與函數防抖

函數節流（throttle）

名詞解釋

函數節流（throttle）：連續執行函數，每隔必定時間執行函數

使用場景

鼠標移動，mousemove 事件
DOM 元素動態定位，window對象的resize和scroll 事件
等等...

函數節流（throttle）簡單實現

function throttle(fn, delay) {
        var last; // 上次執行的時間
        var timer; // 定時器
        delay || (delay = 250); // 默認間隔爲250ms
        return function() {
            var context = this;
            var args = arguments;
            var now = +new Date(); // 如今的時間
            if (last && now < last + delay) { // 當前距離上次執行的時間小於設置的時間間隔
                clearTimeout(timer); // 清除定時器
                timer = setTimeout(function() { // delay時間後，執行函數
                    last = now;
                    fn.apply(context, args);
                }, delay);
            } else { // 當前距離上次執行的時間大於等於設置的時間，直接執行函數
                last = now;
                fn.apply(context, args);
            }
        };
    }

函數防抖（debounce）

名詞解釋

函數防抖（debounce）：空閒時間必須大於或等於必定值的時候，纔會執行調用方法

使用場景

文本輸入keydown 事件
等等...

函數防抖（debounce）簡單實現

function debounce(fn, delay) {
        var timer; // 定時器
        delay || (delay = 250); // 默認空閒時間250ms
        return function() {
            var context = this;
            var args = arguments;
            clearTimeout(timer); // 清除定時器
            timer = setTimeout(function() { // delay時間後，執行函數
                fn.apply(context, args);
            }, delay);
        };
    }