+
81
-

什么是js函数防抖和函数节流 ?

今天听一个同事提起函数防抖与节流,请问什么是js函数防抖和函数节流 ?

网友回复

+
1
-

在实际开发应用中,经常会碰到高频率的事件处理,比如 window 的 scroll, resize 以及 keyup,mousemove 等事件。这些高频率的事件触发会带来一些显著的问题。 如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕。 高频率的事件处理函数中,存在着大量的DOM操作,当浏览器的渲染速度跟不上事件触发频率,容易造成页面卡顿,影响用户体验,甚至会造成 CPU 使用率过高导致页面崩溃。 高频率的事件处理函数中,每执行一次事件处理函数时,都需要和服务器通信建立 HTTP 请求,比如页面的搜索功能,那么可能存在短时间内发起了数十条 HTTP 请求的情况,容易消耗服务器资源。 针对这些问题的解决方案,可以采用函数防抖(debounce)和节流(throttle)的方案解决存在的问题,通过防抖和节流可以将多个事件的触发合并成一个,减少事件触发频率。 同时又不影响实际效果。 函数防抖 个人理解 函数防抖就是法师发技能的时候要读条,技能读条没完再按技能就会重新读条。 函数防抖(debounce) : 当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。如下图,持续触发scroll事件时,并不执行handle函数,当1000毫秒内没有触发scroll事件时,才会延时触发scroll事件。 防抖代码啊啊啊,监视窗口滚动事件

<script>
function debounce(fn, wait) {
var timeout = null;
return function() {
if(timeout !== null)
clearTimeout(timeout);
timeout = setTimeout(fn, wait);
}
}
// 处理函数
function handle() {
console.log(Math.random());
}
// 滚动事件
window.addEventListener('scroll', debounce(handle, 1000));
</script>
我们可以看到,当持续触发scroll事件时,事件处理函数handle只在停止滚动1000毫秒之后才会调用一次,也就是说在持续触发scroll事件的过程中,事件处理函数handle一直没有执行。 函数节流 个人理解 函数节流就是fps游戏的射速,就算一直按着鼠标射击,也只会在规定射速内射出子弹。 函数节流:当持续触发事件时,保证一定时间段内只调用一次事件处理函数。节流通俗解释就比如我们水龙头放水,阀门一打开,水哗哗的往下流,秉着勤俭节约的优良传统美德,我们要把水龙头关小点,最好是如...

点击查看剩余70%

我知道答案,我要回答