防抖和节流

日后施工

<input type="text" id="ipt">

	// -----防抖: 多次事件,只执行最后一次-----
    const ipt = document.querySelector('#ipt')

    const debounce = (callback, delay = 500) => { // <-封装函数
      let time = null // <- 外部函数引用内部函数的变量 保证其不被销毁 闭包
      return function () {
        if (time !== null) {
          clearTimeout(time)
        }
        time = setTimeout(() => { // <- 换为普通函数 this指向window 无法实现功能
          callback.call(this) // <- 绑定this
        }, delay)
      }
    }
    // -----节流: 在规定时间内,多次点击,只执行一次(控制执行次数)-----    
    const throttle = (callback, delay = 500) => {
      let flag = true
      return function () {
        if (flag) {
          setTimeout(() => {
            callback()
            flag = true
          }, delay)
        }
        flag = false
      }
    }