简版函数防抖+节流理解

函数节流+函数防抖,多数引用于需要频繁触发的某一些事件,比如 resize,scroll,mousemove …等等
但是我们触发这些事件的时候,并不希望事件触发的过程中持续去执行对应的函数
因此就产生了 防抖和节流的解决方案

// 假定dom中有一个div.box

let box = document.getElementsByClassName('box')[0];

//  项目一:  函数防抖：高频事件触发【后】，函数在特定时间内只会执行一次
// 防抖盒子
function debounce(fn, wait) {
  let timerId = null;
  return function(...args) {
    if (timerId) clearTimeout(timerId);
    timerId = setTimeout(() => {
      fn.call(this, args);
    }, wait);
  };
}
// 需要防抖的函数
function changeColor (){
        console.log('1')
        box.style.backgroundColor = 'red';
    };
    
// 例：加入我们要监听滚动事件，来改变盒子的颜色

window.addEventListener('scroll',function(){
          // 加一层防抖盒子 来执行改变颜色的方法
          thorttle(changeColor)
    },false);
    
    
  // 这样就达到了我们频繁滚动在特定时间内只执行一次方法
  
  
  
  
  // 项目二：函数节流：高频事件触发，但在在特定时间内只执行一次
  
  // 通过设置一个flag 让函数在500ms内只执行一次
  
  
function throttling() {
     console.log('1')
 };
 
var canRun = true;
window.addEventListener('scroll', function () {
     if (!canRun) {
    return false
 }
    canRun = false
     setTimeout(function () {
        throttling()
     canRun = true
    }, 5000)
}, false)