在开发项目时,有时候会频繁触发一个事件:
① 在浏览器中:
window.onscroll
window.onresize
window.onmousemove
<btn>抢购按钮</btn>
...
频繁触发一些事件,就可能导致性问题。
② 向服务器发送ajax请求,频繁发送,也会给服务器造成压力。
那么如何解决呢?
===>防抖 节流
目的:限制事件的频繁触发、接口的频繁请求、减轻服务器压力。
原理:在函数需要频繁触发时,触发一次后,在规定的时间,不会触发第二次,只有大于设定的时间,才会触发第二次。
<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>
原理:在函数需要频繁触发时,在规定的时间内,只让最后一次生效,前面的都不生效。适合多次事件给出一次响应。
<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>