郑州市二七区建设局网站,网站对网络营销的作用,seo知识是什么意思,word后的网站引用怎么做定义#xff1a;多次触发事件后#xff0c;事件处理函数只执行一次#xff0c;并且在触发操作结束时执行#xff0c;一般用于scroll事件 原理#xff1a;对处理函数进行延时操作#xff0c;若设定的延时到来之前再次触发事件#xff0c;则清除上一次的延时操作定时器多次触发事件后事件处理函数只执行一次并且在触发操作结束时执行一般用于scroll事件 原理对处理函数进行延时操作若设定的延时到来之前再次触发事件则清除上一次的延时操作定时器重新定时
let timer;
window.onscroll function(){if(timer){clearTimeout(timer)}timer setTimeout( function(){//滚动条位置let scrollTop document.body.scrollTop || document.documentElement.scrollTop;console.log(滚动条位置: scrollTop);timer undefined;}, 200)
}防抖与节流的区别 防抖动是将多次执行变为最后一次执行节流是将多次执行变成每隔一段时间执行 防抖指定时间内只执行一次但在等待时间内再次触发事件重新开始延时。 防抖应用场景 – 搜索功能实时响应用户输入给出相关的建议词。
//事件处理函数
function handle(arg){//事件处理代码console.log(事件处理函数-arg); //事件处理函数-keydownArg
}//防抖
function debounce(fn, delay){let timer null;return function(){let content this;let args arguments;if(timer) clearTimeout(timer)timer setTimeout(function(){fn.apply(content, args);}, delay)}
}//事件绑定
var input document.getElementById(input);
input.onkeydown debounce(function(){handle(keydownArg)
}, 500)节流指定时间内只执行一次。 节流应用场景 – 窗口大小改变下拉加载等。
//事件处理函数
function handle(){// 事件处理代码console.log(事件处理函数-arg); //事件处理函数-resizeArg
}
// 防抖处理
function throttle(fn, delay){let timer null;return function(){if(timer) return false;let content this;let args arguments;timer setTimeout(function(){timer nullfn.apply(content, args);}, delay)}
}//事件绑定函数
window.onresize throttle(function(){handle(resizeArg)
}, 500)
