一.防抖、节流
①.防抖(debounce):
当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。
个人理解:需要持续一段时间内不触发事件后,才能调用函数。
示例:
//延迟执行-通过定时器实现,触发事件后delay/1000秒后执行函数
function debounceFun (callback,delay) {
var timeOut
return function () {
if(timeOut) clearTimeout(timeOut)
var context = this;
var args = arguments;
timeOut=setTimeout(() => {
callback.apply(context, args)
}, delay);
}
function log () {
console.log("aa")
}
document.getElement.addEventListener("click",debounceFun(log,2000))
//立即执行
function debounceFun (callback,delay) {
var timeOut
return function () {
if(timeOut) clearTimeout(timeOut)
var context = this;
var args = arguments;
var checkTime=!timeOut
if(!!checkTime)callback.apply(context, args)
timeOut=setTimeout(() => {
timeOut=void(0)
}, delay);}
}
function log () {
console.log("aa")
}
document.getElement.addEventListener("click",debounceFun(log,2000))
②.节流(throttle):
触发函数后,若每次触发函数的间隔小于设置的时间,节流将函数多次调用的时间间隔改为设置的时间(多次触发会多次调用)。
个人理解:将函数执行的时间间隔设置为delay
//立即执行-通过时间戳实现,触发事件立即执行函数,delay/1000秒后的触发才能执行函数
function throttleFun(callback,delay) {
var preTime
return function () {
var context = this;
var args = arguments;
var nowTime=new Date()
if(!preTime||(nowTime-preTime>delay)){
callback.apply(context, args)
preTime=new Date()
}
}
}
function log () {
console.log("aa")
}
document.getElement.addEventListener("click",throttleFun(log,2000))
③.区别:
最大的区别,是否重置延时,防抖因为会重置延时,所以需要持续一段时间不触发事件;节流没有持续时间的限制
二.setTimeout和setInterval区别
1.setTimeout:只执行一次;clearTimeout清除延时器
2.setInterval执行多次;clearInterval清除延时器
示例:
//dom
<button onclick="doClearTimeout(timeout)">clearTimeout</button>
<button onclick="doClearInterval(interval)">clearInterval</button>
//javascript
var timeout=setTimeout(() => {
log("Timeout")
}, 1000);
var interval=setInterval(() => {
log("Interval")
}, 1000);
function log (data="aa") {
console.log(data)
}
function doClearTimeout(timeout) {
clearTimeout(timeout)
}
function doClearInterval(interval) {
clearInterval(interval)
}
运行: