节流和防抖

防抖

在学习有关这方面的知识的时候看到有个帖子，里面对于防抖是这么说的，觉得很有道理防抖就像是法师放技能，进度条没有满的时候释放技能，进度条就会重新从0开始，等到技能满的时候才可以释放技能。防抖的原理就是这样的，在没有达到规定的时间之前如果一直去触发事件的话，事件是不会被真正触发的，只有当在规定的时间内没有去触发事件时，才会去真正触发这个事件

function debounce(fn, delay) {
  let timer = null;
   return function() {
       let _this = this;
       let _args = Array.prototype.slice.call(arguments);
       clearTimeout(timer);
       timer = setTimeout(() => {
           fn.apply(_this, _args);
       }, delay);
   }
}
const test = debounce((val) => {
   console.log('input:' + val);
}, 1000);
const input = document.getElementById('input');
input.addEventListener('keyup', function(e) {
   test(e.target.value);
})

setInterval(debounce(() => console.log(111), 500), 1000);
setInterval(debounce(() => console.log(111), 2000), 1000);

上面的debounce里的函数第一次在0.5s内执行，以后每隔1.5s执行一次下面的debounce里的函数yong y

节流

当持续触发事件时，保证在规定时间内触发一次就像是玩星球大战的时候，无论我们以多快的速度发射子弹，子弹还是只会规定射速内发射

function throttle(fn, delay) {
    let last = +new Date();
    let timer = null;
    return function() {
        let _this = this;
        let _args = Array.prototype.slice.call(arguments);
        let now = +new Date();
        if (last + delay > now) {
            clearTimeout(timer);
             timer = setTimeout(function () {
                 last = now;
                 fn.apply(that, _args);
             }, delay)
         } else {
             last = now;
             fn.apply(_this, _args);
         }
    }
}

const test = throttle((val) => {
    console.log('input: '+ val);
}, 1000);
const input = document.getElementById('input');
input.addEventListener('keyup', (e) => {
    test(e.target.value);
})

setInerval(throttle(() => console.log(111), 1000), 10)

不管我们设定的执行时间间隔多小，总是1s内只执行一次。

节流和防抖

防抖

节流

CATALOG