前端 JavaScript 防抖 节流

=> 应用场景 <=

在开发项目时，有时候会频繁触发一个事件：
    ① 在浏览器中：

        window.onscroll

        window.onresize

        window.onmousemove

        <btn>抢购按钮</btn>
        ...
        频繁触发一些事件，就可能导致性问题。
    ② 向服务器发送ajax请求，频繁发送，也会给服务器造成压力。

那么如何解决呢?

=>防抖 节流

目的：限制事件的频繁触发、接口的频繁请求、减轻服务器压力。

1、节流

原理：在函数需要频繁触发时，触发一次后，在规定的时间，不会触发第二次，只有大于设定的时间，才会触发第二次。

<button id="btn">函数的节流</button>

<script>
//节流时间为1000ms
document.getElementById("btn").onclick = throttleFn(handleClick,1000);
// 通过此函数达到，限制触发事件两次间隔时间的效果。
function throttleFn(callback,delay){
    let start = 0;
    return function () {
        let current = Date.now();
        if(current - start > delay){
            callback();
            start = current;
        }
    }
}
// 将需要做出响应操作的函数，作为节流函数的参数一。
function handleClick(){
    console.log("抢购按钮触发~")
}
</script>

2、防抖

原理：在函数需要频繁触发时，在规定的时间内，只让最后一次生效，前面的都不生效。适合多次事件给出一次响应。

<button id="btn">立即抢购</button>

<script>
// 1000ms内，让你前面疯狂触发的最后一次生效。
document.getElementById("btn").onclick = debounceFn(handleClick,1000);
// 在防抖函数中有一个定时器，如果上次点击还没过预定时间，那么上次的定时器会直接清空，重新开启。
function debounceFn(callback,delay){
    return function () {
        if(callback.timeoutId){
            clearTimeout(callback.timeoutId)
        }
        callback.timeoutId = setTimeout(()=>{
            callback()
        },delay)
    }
}
// 作为防抖处理函数的参数一
function handleClick(){
    console.log("点击触发~")
}
</script>