数的节流防抖(面试题要求0提示纯手写)

• 1. 节流
  • 事件在执行时,第一个开始执行时,在结束之前或者指定时间之前,无法触发下一次
  • 除非等到第一次执行结束或者指定时间到达后,才可以进行下一次
• 2. 防抖
  • 事件在开始执行时,如果快速触发了第二次,那么第二次会取代第一次,只会执行最后一次

    const inp = document.querySelector('.inp')
    // 0. 基础版
    // inp.oninput = function() {
    //   console.log(this.value)
    // }

    // 1. 节流
    // let flag = true
    // inp.oninput = function() {
    //   if(flag === false) return
    //   flag = false
    //   setTimeout(() => {
    //     flag = true
    //     console.log(this.value)
    //   }, 1000)
    // }

    // 2. 扩展:自执行函数
    // function fn() {
    //   console.log('我是一个普通函数 fn')
    // }
    /**
     * 自执行函数需要在代码最前边添加一个分号,用于和上一行代码起到一个分割作用
     *    自执行函数如果需要传参,将实参书写在 第二个小括号内即可
     * */ 
    // ;(function fn(num) {
    //   console.log('我是一个普通函数 fn', num)
    // })(99)

    // 2. 节流的优化
    // let flag = true
    inp.oninput = (function (flag) { //当前这个函数会立即执行,然后返回一个函数 给到 inp.oninput
      return function() {
        // 使用flag的时候会先在当前作用域找,没找到,然后去上层作用域(自执行函数内)找,在这里找到了形参flag,初始值为true
        if(flag === false) return
         flag = false
          setTimeout(() => {
            flag = true
            console.log(this.value)
          }, 300)
      }
    })(true)
    // 2. 防抖
    /*let timer = 0
    inp.oninput = function() {
      clearInterval(timer)
      timer = setTimeout(() => {
        console.log(this.value)
      }, 300)
    }*/

    // 3. 自执行函数
    // let timer = 0
    inp.oninput = (function(timer) {
      return function() {
        clearInterval(timer)
        timer = setTimeout(() => {
          console.log(this.value)
        }, 300)
      }
    })(0)