Javascript中函數節流與防手震的實作（附程式碼）

這篇文章帶給大家的內容是關於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);
        };
    }

以上是Javascript中函數節流與防手震的實作（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！