JS进阶篇：函数防抖和节流

throttle（节流）：在规定时间内，保证执行/触发一次该函数。原理是通过判断是否到达一定时间来触发函数。

debounce（防抖）：将几次操作合并为一此操作进行。当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始计时。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

区别： 函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。

比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。

通俗的来讲

我们在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。

此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。

防抖

定义：将几次操作合并为一此操作进行

在前端中有一些事件会频繁的触发容易造成页面卡顿

例如：

1. window 的 resize、scroll
2. mousedown、mousemove
3. keyup、keydown
4. input 的 input 事件

搜索框搜索输入，只需用户最后一次输入完，再发送请求；

用户名、手机号、邮箱输入验证；

浏览器窗口大小改变后，只需窗口调整完后，再执行 resize 事件中的代码，防止重复渲染。

立即执行版：

//防抖(立即执行)
function debounce(fn, wait = 500) {
    let timerId;
    let flag = true;
    return function () {
        clearTimeout(timerId);
        if (flag) {
            fn.apply(this, arguments);
            flag = false;
        } else {
            timerId = setTimeout(function () {
                flag = true;
            }, wait);
        }
    };
}

非立即执行版:

//防抖(非立即执行)
function debounce(fn, wait = 500) {
    let timerId;
    return function () {
        if (timerId) {
            clearTimeout(timerId);
        }
        timerId = setTimeout(() => {
            fn.apply(this, arguments);
        }, wait);
    };
}

合并版：

//防抖(合并版)
function debounce_merge(fn, wait = 500, isImmediate = false) {
    let timerId = null;
    let flag = true;
    if (isImmediate) {
        return function () {
            clearTimeout(timerId);
            if (flag) {
                fn.apply(this, arguments);
                flag = false;
            } else {
                timerId = setTimeout(function () {
                    flag = true;
                }, wait);
            }
        };
    } else {
        return function () {
            if (timerId) {
                clearTimeout(timerId);
            }
            timerId = setTimeout(() => {
                fn.apply(this, arguments);
            }, wait);
        };
    }
}

节流

定义：让事件在一定时间内只执行一次

实际运用：搜索框input事件，例如要支持输入实时搜索可以使用节流方案。

节流throttle代码（时间戳）：

function throttle(fn, wait = 500) {
    let startTime = 0;
    return function () {
        let endTime = Date.now();
        if (endTime - startTime > wait) {
            fn.apply(this, arguments);
            startTime = endTime;
        }
    };
}
// var throttle = function(fn, delay) {
// 　　var prev = Date.now();
// 　　return function() {
// 　　　　var context = this;
// 　　　　var args = arguments;
// 　　　　var now = Date.now();
// 　　　　if (now - prev >= delay) {
// 　　　　　　fn.apply(context, args);
// 　　　　　　prev = Date.now();
// 　　　　}
// 　　}
// }
// function handle() {
// 　　console.log(Math.random());
// }
// window.addEventListener('scroll', throttle(handle, 1000));

节流throttle代码（定时器）：

function throttle(fn, wait) {
    let timeId = null;
    return function () {
        if (!timeId) {
            timeId = setTimeout(function () {
                fn.apply(this, arguments);
                timeId = null;
            }, wait);
        }
    };
}
// // 节流throttle代码（定时器）：
// var throttle = function(fn, delay) {
//     var timer = null;
//     return function() {
//         var context = this;
//         var args = arguments;
//         if (!timer) {
//             timer = setTimeout(function() {
//                 fn.apply(context, args);
//                 timer = null;
//             }, delay);
//         }
//     }
// }
// function handle() {
//     console.log(Math.random());
// }
// window.addEventListener('scroll', throttle(handle, 1000));

节流throttle代码（时间戳+定时器）：

// 节流throttle代码（时间戳+定时器）：
var throttle = function (fn, delay) {
    var timer = null;
    var startTime = Date.now();
    return function () {
        var curTime = Date.now();
        var remaining = delay - (curTime - startTime);
        var context = this;
        var args = arguments;
        clearTimeout(timer);
        if (remaining <= 0) {
            fn.apply(context, args);
            startTime = Date.now();
        } else {
            timer = setTimeout(fn, remaining);
        }
    };
};
function handle() {
    console.log(Math.random());
}
window.addEventListener("scroll", throttle(handle, 1000));

以上都是非立即执行版本

//节流(立即执行)
function throttle(fn, wait = 500) {
    let timeId = null;
    return function () {
        if (!timeId) {
            timeId = true;
            fn.call(this, ...arguments);
            timeId = setTimeout(function () {
                timeId = null;
            }, wait);
        }
    };
}

//节流(合并)
function throttle_merge(fn, wait = 500, isImmediate = false) {
    let flag = true;
    let timer = null;

    if (isImmediate) {
        return function () {
            if (flag) {
                fn.apply(this, arguments);
                flag = false;
                timer = setTimeout(() => {
                    flag = true;
                }, wait);
            }
        };
    } else {
        return function () {
            if (flag == true) {
                flag = false;
                var timer = setTimeout(() => {
                    fn.apply(this, arguments);
                    flag = true;
                }, wait);
            }
        };
    }
}