防抖节流

防抖

    let ipt = document.querySelector('input')
    let btn = document.querySelector('button')
    // 封装一个debounce函数，实现防抖功能（频率很快的时候只执行最后一次）
    function debounce(fn) {
      console.log('键盘还没按呢');
      let timerId = null
      // 调用完debounce之后就会得到这个函数，这个函数内部有一个变量timerId，它是保存在一个闭包中的
      return function () {
        clearTimeout(timerId)
        timerId = setTimeout(() => {
          // 此处的this就是事件绑定的那个dom对象
          console.log(this);
          // 将fn内部的this改成事件绑定的那个dom对象
          fn.call(this)
          // fn.apply(this)
          // fn.bind(this)() // 这里不太合适
        }, 300)
      }
    }
    function search() {
      console.log('search', this);
    }
    function like() {
      console.log('一键三连', this);
    }
    ipt.addEventListener('keyup', debounce(search))
    btn.addEventListener('click', debounce(like))

节流

    let box = document.querySelector('.box')
    // 节流
    // 封装一个throttle函数，实现节流功能（ 频率很快的时候，速度均匀的运行）
    function throttle(fn , ...args) {
      // 通过闭包保存一个变量 这个变量用于设置定时的开关 默认是开着的
      let isOpen = true
      return function () {
        // 当开关没有开的时候，就返回，不执行后面的定时器了。只有当后面的定时器执行完成之后，开关才重新打开
        if (!isOpen) return
        // 当滚动时，立马把开关关起来，开启一个定时器
        isOpen = false
        setTimeout(() => {
          // 时间到了执行逻辑
          fn.call(this,args)
          // 时间到了，重新打开开关
          isOpen = true
        }, 100)
      }
    }
    function gundong(...arr) {
      console.log(`${arr}在滚动box盒子`, this);
    }
    box.addEventListener('scroll', throttle(gundong , 'jake','rose'))
    // box.addEventListener('scroll', gundong)