js基础知识——函数的节流防抖

一、自执行函数

• 自执行函数需要在函数最前边添加一个分号(;)，用于和上一行代码起到一个分割作用,
• 用()将普通函数内容包裹起来，并在后面再加一个括号()，用来写实参

   // 普通函数 
    function fn () {
      console.log('普通函数fn')
    }
    fn ()
    
    // 自执行函数
    ;(function fn (num) {
      console.log('普通函数fn',num)
    })(666)

二、函数的节流

• 事件在执行时,第一次开始执行时,在结束之前或在指定时间之前,无法触发下一次,除非等到第一次执行结束或在指定时间到达后,才可以进行下一次

   // 在一个input框内输入内容
        // 节流函数基础版
        inp.oninput =function () {
          console.log(this.value)
        }
        let flag = true
        inp.oninput = function () {
          if (flag === false) return
          flag = false
          setTimeout(() => {   //倒计时器
            flag = true
            console.log(this.value)
          },300)
        }

        //节流函数优化
        inp.oninput = (function(flag){
          return function () {
          if (flag === false) return
          flag = false
          setTimeout(() => {
            flag = true
            console.log(this.value)
          },300)
        }
        })(true)

三、函数的防抖

• 事件在开始执行时,如果快速触发了第二次,那么第二次会取代第一次,只会执行最后一次

     // 在一个input框内输入内容
        // 防抖基础版
        let timer = 0
        inp.oninput = function(){
          clearTimeout(timer)
          timer = setTimeout(() => {
            console.log(this.value)
          },300)
        }

        // 防抖优化版
        inp.oninput = (function (timer){
          return function () {
          clearTimeout(timer)

          timer = setTimeout(() => {
            console.log(this.value)
          },300)
        }
        })(0)