=> 应用场景 <=

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

        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>
// 100ms内，让你前面疯狂触发的最后一次生效。
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>