JS的防抖与节流学习笔记

防抖(debounce)：当持续触发事件时，在一定的时间段内，只有最后一次触发的事件才会执行。

例：

    function debounce(fn, wait) {
        var timer = null;
        return function() {
            if(timer !== null) {
                clearTimeout(timer);
            }
            timer = setTimeout(fn, wait);  
        }
    }
    function handle() {
        console.log('防抖处理!'); 
    }
    window.addEventListener('scroll', debounce(handle, 1000));

节流(throttle)：当持续触发事件时，已执行的事件在一定时间段内不会再次执行。实现节流有时间戳和定时器两种方式。

例：

// 时间戳：
    var throttle = function(func, delay) {
        var prev = Date.now();
        return function() {
            var now = Date.now();
            if (now - prev >= delay) {
                func();
                prev = Date.now();
            }
        }
    }
    function handle() {
        console.log('节流处理!');
    }
    window.addEventListener('scroll', throttle(handle, 1000));

// 定时器：
    var throttle = function(func, delay) {
        var timer = null;
        return function() {
            if (!timer) {
                timer = setTimeout(function() {
                    func();
                    timer = null;
                }, delay);
            }
        }
    }
    function handle() {
        console.log('节流处理!');
    }
    window.addEventListener('scroll', throttle(handle, 1000));

函数防抖和节流都是防止某一事件被频繁触发；区别：防抖是将多次执行变为最后一次执行，节流是将多次执行变为一段时间只执行一次。

应用场景：窗口resize、页面scroll、拖拽、限时抢购、实时搜索等。