企业的网站做一个要多少,怎么把网站开发成crx,在线画图网页版,教你如何做网络营销推广背景 今天在coding的时候#xff0c;做了一个搜索框#xff0c;也正是这个搜索框#xff0c;让我和后台小伙伴直接由铁磁变为塑料兄弟。那到底发生啥了呢#xff1f;其实很简单#xff0c;其实很无奈#xff0c;就是我用王者的手速把他的接口访问崩了#xff01; 我们在…背景 今天在coding的时候做了一个搜索框也正是这个搜索框让我和后台小伙伴直接由铁磁变为塑料兄弟。那到底发生啥了呢其实很简单其实很无奈就是我用王者的手速把他的接口访问崩了 我们在平时开发的时候会有很多场景会频繁触发事件比如说搜索框实时发请求onmousemove,resize,onscroll等等有些时候我们并不能或者不想频繁触发事件咋办呢这时候就应该用到函数防抖和函数节流了
函数防抖debounce 什么是防抖短时间内多次触发同一个事件只执行最后一次或者只在开始时执行中间不执行。举个栗子你去乘坐公交车不停地上人连续上人的过程中司机师傅是不会开车的只有当最后一个人上车了老司机才会开车嘿嘿嘿我们以不停地触发onmousemove事件让数字 1为例。代码如下
不使用防抖和节流数字会像得了羊癫疯一样不停地增长
//变量初始化
var xcd document.getElementById(xcd),count 1;
//要执行的操作 数字 1
function doSomething() {xcd.innerHTML count ;
};
//触发onmousemove事件 正常情况下
xcd.onmousemove doSomething;使用防抖之绿色基础版
//绿色基础版
function debounce(doSomething,wait){var timeout;//需要一个外部变量为增强封装所以使用闭包return function(){var _this this,_arguments arguments;//arguments中存着eclearTimeout(timeout);timeout setTimeout(function(){doSomething.apply(_this,_arguments); },wait);}
}
//触发onmousemove事件
xcd.onmousemove debounce(doSomething,1000);这个绿色基础版虽然简单但是已经能够解决大部分需求场景了没有啥特殊需求使用这个版本就行了用起来简直像吃了巴豆一样duangduangduang极其通畅But还会有一些其他需求比如我想立即执行就是连续触发事件的开始时立即执行一次后连续触发不执行我们用isImmediate表示是否立即执行代码如下使用防抖之立即执行版
//立即执行版
function debounce(doSomething,wait,isImmediate){var timeout;return function(){var _this this,_arguments arguments;clearTimeout(timeout);if(isImmediate){var isTrigger !timeout;timeout setTimeout(function(){timeout null;}, wait)isTriggerdoSomething.apply(_this,_arguments);}else{timeout setTimeout(function(){doSomething.apply(_this,_arguments); },wait);}}
}
//触发onmousemove事件
xcd.onmousemove debounce(doSomething,1000,true);函数节流throttle 什么是节流节流是连续触发事件的过程中以一定时间间隔执行函数。节流会稀释你的执行频率比如每间隔1秒钟只会执行一次函数无论这1秒钟内触发了多少次事件。 举个栗子你每天要喝好多水但是你不会每喝完一口水都要去一次厕所如果有盆友是酱紫的话我劝你还是去医院看看吧→_→厕所看你都烦你虽然一直在喝水但是不会一直去厕所通常的节奏是喝水喝水喝水上厕所喝水喝水喝水上厕所虽然一直在触发但是每隔一段时间只会执行一次操作这就是函数节流
使用节流之时间戳版
//绿色基础版之时间戳版
function throttle(doSomething,wait){var _this,_arguments,initTime 0;return function(){var now new Date();//将new date()转化为时间戳_this this;_arguments arguments;if(now - initTimewait){doSomething.apply(_this,_arguments);initTime now;}}
}
//触发onmousemove事件
xcd.onmousemove throttle(doSomething,1000);使用节流之定时器版
//绿色基础版之定时器版
function throttle(doSomething,wait){var timeout;return function(){var _this this;_arguments arguments;if(!timeout){timeout setTimeout(function(){timeout null;doSomething.apply(_this,_arguments);},wait);};}
}
//触发onmousemove事件
xcd.onmousemove throttle(doSomething,1000);同样以上两个节流的绿色基础版也可以满足大多数需求场景啦这两个版本有什么区别呢时间戳版会在开始时立即执行一次最后时间间隔内不再执行定时器版开始时不执行最后时间间隔内再执行一次。可以根据自己的实际需求选择合适的版本。当然可能还有一些BT的产品会问你能不能先立即执行一次中间固定间隔时间执行最后在执行一次呢这就到了装B的时候了。像我这么牛X的前端必须的啊把两种合在一起就行了双修什么的最喜欢了*ο* 使用节流之双剑合璧版
//节流之双剑合璧版
function throttle(doSomething, wait) {var timeout, _this, _arguments,previous 0;var later function() {previous new Date();timeout null;doSomething.apply(_this, _arguments)};var throttled function() {var now new Date();//下次触发 doSomething 剩余的时间var remaining wait - (now - previous),_this this;_arguments arguments;// 如果没有剩余的时间了if (remaining 0) {if (timeout) {clearTimeout(timeout);timeout null;}previous now;doSomething.apply(_this, _arguments);} else if (!timeout) {timeout setTimeout(later, remaining);}};return throttled;
}
//触发onmousemove事件
xcd.onmousemove throttle(doSomething,1000);深入理解函数防抖和节流合理选择防抖或节流能解决很多帕金森疾病实乃出门旅行居家生活之必备良品OK就酱我就是我我瞅自己都上火不定期分享一些前端知识点和面试点喜欢点波关注呗参考https://github.com/mqyqingfeng/Blog
