JS优化网络请求节流与防抖

最新推荐文章于 2025-01-15 15:14:25 发布

学you

最新推荐文章于 2025-01-15 15:14:25 发布

阅读量480

点赞数 1

CC 4.0 BY-SA版权

文章标签： JS优化网络请求节流与防抖疯狂点击防抖节流

本文链接：https://blog.youkuaiyun.com/qq_38414213/article/details/87572936

本文详细介绍了前端开发中常用的节流(throttle)和防抖(debounce)技术，通过具体示例展示了如何使用这两种技术优化用户体验，减少不必要的函数调用，特别是在窗口调整、页面滚动和实时搜索等场景下。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一：节流是预定义一个函数只有再大于等于执行周期时才执行周期内不执行。

使用场景：窗口调整（resize）,页面滚动（scroll），疯狂点击（mousedown）；

<button class="btn">sssss</button>

var btn=document.getElementsByClassName("btn")[0];

var div=document.getElementsByTagName("div")[0];

btn.onclick=throttle(add,5000);

function add(e){

console.log(this,e)

div.innerHTML=parseInt(div.innerHTML)+1;

}

function throttle(handler,wait){

var lasttime=0;

return function () {

var nowTime=new Date().getTime();

if(nowTime-lasttime>wait){

handler.apply(this,arguments);

lasttime=nowTime;

}

</script>

二：防抖就是在函数需要频繁触发情况时，只有足够空闲的时间，才执行一次。

场景：实时搜索（keyup),拖拽（mousemove)

<p></p>

search.oninput=debounce(ajax,2000);

function ajax(e){

var p=document.getElementsByTagName("p")[0];

p.innerHTML=search.value;

}

function debounce(handler,delay){

var timer=null;

return function() {

var _self=this,_arg=arguments;

clearTimeout(timer);

timer=setTimeout(function(){

handler.apply(_self,_arg);

},delay);

}

</script>

Vue:

new Vue({
el:"#box",
data:{
data:"hello world",
msg:0,
numData:"10",
listtime:0
},
methods: {
throttle:function(handler,wite){
var currenttime=+new Date();
if(currenttime- this.listtime>wite){
handler.apply(null,arguments);
this.listtime=currenttime;
}

},
add:function(){
this.msg++;
},
debounce:function(handler,delay){
var timer=null;
return function(){
var _arg=arguments;
clearTimeout(timer);
timer=setTimeout(()=>{
handler.apply(this,_arg);
},delay);
}
},
selfinput:function(e){
console.log(e)
}
}
// template:"<div><p>{{numData}}</p><div>"
})