网站 扁平化,投资网站网站源码,店铺店面装修,所得税汇算是在12366网站做吗大纲 一、出现缘由 二、什么是防抖debounce和节流throttle 三、应用场景 3.1防抖 3.2节流 一、出现缘由 前端开发中#xff0c;有一部分用户行为会频繁触发事件#xff0c;而对于DOM操作#xff0c;资源加载等耗费性能的处理#xff0c;很可能导致卡顿#xff0c;甚至浏览…大纲 一、出现缘由 二、什么是防抖debounce和节流throttle 三、应用场景 3.1防抖 3.2节流 一、出现缘由 前端开发中有一部分用户行为会频繁触发事件而对于DOM操作资源加载等耗费性能的处理很可能导致卡顿甚至浏览器崩溃防抖和节流就是为了这一类的问题出现的前端优化技术。 二、什么是防抖debounce和节流throttle 防抖debounce是函数在规定延迟时间内不被调用才能再次被调用如果在规定时间内调用延迟重新开始计算 节流throttle是在规定的延迟时间间隔后函数才执行一次以固定的频率被触发。 三、简单实现 3.1防抖 连续触发事件的时候不会有任何反应停止触发事件的多少秒就会执行在延迟时间内执行函数就重新开始一个定时器。 function debounce(func,delay300,timernull){return (...args){clearTimeout(timer);timersetTimeout(func.bind(null,...args,delay);)}
}
function query(){//ajax
}
input.addEventListener(keyup,debounce(query))3.2节流 触发事件的时候执行一个函数在之后的一段时间内进这个函数会被return真正的逻辑不能执行定时器在一定时间后重置开关再进来就能再次执行真正的逻辑了。 function throttle(func,delay60){let lockfalse;return (...args){if(lock)reutrn;function(..args);locktrue;setTimeout(()lockfalse,delay);}
}
function query(){//ajax
}
decument.addEventListener(scroll,throttle(query));四、应用场景 3.1防抖throttle的应用场景 防抖适用于window.onscroll事件等到拉动动作结束后再触发一个事件或者拖拽 _.throttlefunction(func,wait,options){var context,args,result;var timeoutnull;var previous0;if(!options)options{}var laterfunction(){previousoptions.leadingfalse:0:new Date();timeoutnull;resultfunc.apply(context,args);if(!timeout)contextargsnull;}return fucntion(){var nownew Date();if(!previous option.leadingfalse)previousnow;var remainingwait-(now-previous);contextthis;argsarguments;if (remaining 0 || remaining wait) {if (timeout) {clearTimeout(timeout);timeout null;}previous now;result func.apply(context, args);if (!timeout) context args null;} else if (!timeout options.trailing ! false) {timeout setTimeout(later, remaining);}return result;}}3.2节流throttle的应用场景 下面具体讲一个例子 假设我们网站有一个搜索框用户输入文本我们自动会联想匹配除一些结果供用户选择我首先想到的做法是监听keypress事件或change事件然后ajax请求数据但是当用户快速输入的时候就会瞬间触发一连串的请求这无疑不是我们想要的我们想要的是用户停止输入的时候才去触发查询的请求这时候函数防抖可以帮助我们。 _.throttlefunction(func,wait,immediate){var timeout,args,context,timestamp,result;var laterfunction(){ //如果没有超过等待时间就接着设置一个定时器时间是delay的时间减去方法执行的时间var lastnew Date().getTime() - timestamp;if(lastwait last0){timeoutsetTimeout(later,wait-last);}else{ //如果已经过wait时间了就直接清除定时器给result赋值clearTimeout(timeout);if(!immediate){resultfunc.apply(context.args);if(!timeout)contextargsnull;}}}return function(){contextthis;argsarguments;timestampnew Date().getTime();var callNowimmediate timeout; //如果是立即执行或者之前执行过还没过延迟时间if(!timeout)timeoutsetTimeout(later,wait); //如果之前没执行过现在开始定时任务如果执行过timeout存在就返回个空的result.if(callNow){ //如果是立即执行就立即执行fn,这时候console.log(1);resultfunc.apply(context,args);contextargsnull;}return result;}}function query(){//ajaxconsole.log(ajax);}$(#search).keypress(_.throttle(query,300));转载于:https://www.cnblogs.com/learnings/p/9543782.html
