防抖节流函数

什么是防抖？什么是节流

• 防抖：当事件被触发时，设定在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时，（比如：input框输入，搜索联想，用户在不断输入值时，用防抖来节约请求资源等等）但是只触发最后一次，以最后一次为准
  • 防抖步骤：
    • 第一步： 声明变量存储定时器
    • 第二步： 每一次时间触发的时候，先不触发事件，先开启定时器，间隔事件之后在触发
    • 第三步： 每一次触发的时候都需要将上一次的定时器清除，执行本次定时器

//  第一步： 声明变量存储定时器
    let timeId = null;
  //  第二步： 每一次时间触发的时候，先不触发事件，先开启定时器，间隔事件之后在触发
    触发事件.addEventListener('click',function(){
          //  第三步： 每一次触发的时候都需要将上一次的定时器清除，执行本次定时器
      clearTimeout(timeId)
      timeId = setTimeout(()=>{
        console.log('防抖成功')
      },3000)
    });

• 节流：规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。。频繁触发某个事件，但是只能每隔一段事件触发一次
  • 节流步骤
    • 第一步：声明一个 时间变量 存储时间戳 （开始的值为 null）
    • 第二步：获取本次时间戳
    • 第三次：判断 本次事时间戳 是否大于 设定的时间
    • 第四次：把本次事件戳 存储 到声明的那个 时间变量

// 第一步：声明一个变量记录触发时间
  let times = null;
  let j = 1;
  window.onmousemove = function(){
    // 获取本次时间戳
    let timeDate = Date.now()
    // console.log(timeDate)
    // 第二步：判断2次触发时间是否大于设定时间
    if(timeDate - times >= 5000){
      j++;
      console.log('移动了'+j+'次')
      
      times = timeDate;
    }
  }

// 函数封装好的  防抖节流
// 防抖  
 let btnsss = document.getElementById('numbesfr');
  btnsss.addEventListener('click',one(three))
    // 防抖 
    function one(fn){
      // 声明一个定时器变量
      let two = null;
      // 返回一个函数
      return function(){
        // 判断
        if(two !== null){
          // 清空定时器
          clearTimeout(two)
        }
        // 启动定时器
        two = setTimeout(()=>{
          //  执行回调 
          fn.apply(this,arguments);
          // 重置定时器变量
          two = null
        },500)
      }
    }
    function three(){
      console.log('防抖成功')
    }

// 节流  
<button type="button" id="butt">节流按钮</button>
<script>
  // 获取元素
  let btn = document.getElementById('butt')
  // 绑定点击事件
  btn.addEventListener('click',sisui(fiy))
  // 定义一个 sisui函数
  function sisui(fn){
    // 这里为什么要写 let xfq = true???
    let xfq = true;
    return function(){
      if(!xfq){
        // 对 xfq 取反，false 的话就不执行，直接跳出，否则就执行下面的代码
        return
      };
      // 设置一个定时器
      setTimeout(()=>{
        //  执行回调  改变 this 指向后面为什么要跟 arguments
        fn.apply(this,arguments)
        // 把 xfq 的状态赋值成 true
        xfq = true
      },2000);
    }
  }
  function fjy(){
    console.log('节流成功')
  }
</script>