节流和防抖

作用:

是为了解决js的抖动问题

什么是js的抖动?

js的一些特殊的事件在触发的时候事件回调函数会持续触发.(input/resize/频繁的点击事件),这样影响性能,浪费网络资源

防抖

事件在持续触发的时候事件回调函数不会执行,只有在停止触发事件后特定的时间才会在执行时间回调函数.

节流

事件在持续触发的时候,事件回调函数以间隔固定的时间执行

实现代码

// 防抖
let $btn = document.getElementById('btn');

$btn.onclick = debounce(luoji,1000);
//防抖函数
function debounce (luoji,delay){
  let time = null;
  return function(){
    if(time){
      clearTimeout(time);
    }
    time = setTimeout(() => {
      luoji();
    }, delay);
  }
}
//逻辑执行的函数
function luoji(){
  console.log('这里是执行的逻辑代码');
}


// 节流
$btn.onclick = debounce(luoji,1000);
//节流函数    
function debounce(luoji,delay){
  let isTrue = true;
  return function(){
    if(isTrue){
      isTrue = false
      setTimeout(() => {
        luoji();
        isTrue = true;
      }, 1000);
    }
  }
}
//逻辑执行函数
function luoji(){
  console.log('我是需要执行的逻辑函数');
}

总结

其实现在已经有很多的第三方的工具包可以解决这些问题了,像lodash等可以很方便的解决这个问题同时也有很多的api对数组对象的处理都有很好的支持,一起努力学习吧.