防抖:在触发事件之后规定的时间之后执行该事件(比如说input事件想要在用户输入结束之后多少秒再执行事件--查询等)
节流:用户在触发事件的时候,会在规定的时间内只会触发一次(比如说input事件用户一直在输入但是呢不会一直向后端发起请求,规定1秒请求一次。只要用户一直在输入1秒就会发起一个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)
只要触发事件timer就会有值并且刷新计时器(清除)
节流代码
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)
刚触发事件就会触发事件 每一秒会执行一次事件;如果一直在执行timer就会有值就会直接结束执行,在计时器里面从新定义timer=null;让每一秒执行一次计时器;