js笔记[2]

一.防抖、节流

①.防抖（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)
}

运行: