防抖:在觸發(fā)事件之后規(guī)定的時間之后執(zhí)行該事件(比如說input事件想要在用戶輸入結(jié)束之后多少秒再執(zhí)行事件--查詢等)
節(jié)流:用戶在觸發(fā)事件的時候渡嚣,會在規(guī)定的時間內(nèi)只會觸發(fā)一次(比如說input事件用戶一直在輸入但是呢不會一直向后端發(fā)起請求草讶,規(guī)定1秒請求一次薪介。只要用戶一直在輸入1秒就會發(fā)起一個ajax)
防抖代碼
function?debouncing(fn, outTimer) {
? ? var self = fn,timer=null;
????return function() {
? ? ????var args = arguments;
? ?????if (timer) {
? ? ? ? ? ? clearTimeout(timer)
????????}
? ? ????timer = setTimeout(function(){
? ? ? ? ????self.apply(this, args)
????????????// self()
????????},outTimer)
????}
}
window.onresize = debouncing(function() {
? ? console.log('1')
}, 2000)
只要觸發(fā)事件timer就會有值并且刷新計時器(清除)
節(jié)流代碼
function throttle(fn, outTime) {
? ? var self = fn,
? ? timer,
? ? firstTime = true;
? ? return function() {
? ? ? ? var args = arguments,
? ? ? ? ? ? _me = this;
? ? ? ? if (firstTime) {
? ? ? ? ? ? // self()
? ? ? ? ? ? self.apply(_me, args)
? ? ? ? ? ? return firstTime = false;
? ? ? ? }
? ? ? ? if (timer) {
? ? ? ? ? ? return false
? ? ? ? }
? ? ? ? timer = setTimeout(function() {
? ? ? ? ? ? clearTimeout(timer)
? ? ? ? ? ? timer = null;
? ? ? ? ? ? // self()
? ? ? ? ? ? self.apply(_me, args)
? ? ? ? }, outTime)
? ? }
}
window.onresize = throttle(function() {
? ? console.log('1')
}, 1000)
剛觸發(fā)事件就會觸發(fā)事件? 每一秒會執(zhí)行一次事件刽射;如果一直在執(zhí)行timer就會有值就會直接結(jié)束執(zhí)行摹恰,在計時器里面從新定義timer=null;讓每一秒執(zhí)行一次計時器低千;