函数的节流防抖 柯里化 沙箱

函数的节流防抖

1.节流

事件在执行是,第一次开始执行时,在结束之前按或者在指定时间之前,除非等到第一次执行结束或者在事件到达后,才可以进行下一次.

2.防抖

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

//节流 基础版
    let flag = true
    inp.oninput = function () {
      if (flag === false) return
      flag = false
      console.log(this.value);
      setTimeout(() => {
        flag = true
        console.log(this.value);
      }, 300)
    }
//节流 自执行优化版  把flag写在函数里
    inp.oninput = (function (flag) {
      return function fn() {
        if (flag === false) return
        flag = false
        console.log(this.value);
        setTimeout(() => {
          flag = true
        }, 300)
      }
    })(true)
//防抖
    let timer = 0
    inp.oninput = function () {
      // clearTimeout(timer)
      clearInterval(timer)
      timer = setTimeout(() => {
        console.log(this.value);
      }, 300)
    }
 //防抖 优化版
      inp.oninput = (function (timer) {
      return function fn() {
        clearTimeout(timer)
        timer = setTimeout(() => {
          console.log(this.value);
        }, 300)
      }
    })(0)

柯里化 函数:

一个函数接收多个参数都能够完成功能,柯里化函数将这一个函数拆分为两个函数,每个函数函数都只接受一个参数,然后完成功能相同

 //柯里化封装
   /**    函数柯里化内
     *        外层函数:收集参数
     *        内层函数:负责处理功能
     */        
       function fn(a, b, c, d) {
      return a + '://' + b + ":" + c + d
    }

    function curry(callback, ...arg) {
      /**
       * curry函数需要接受两个参数
       *     callback:当阐述传递足够需要执行的函数
       *      ...arg:接受后续这个参数传递所有实参(以数组形式存储)
      */
      return function (..._arg) {  //内层函数:赋值处理功能
        _arg = [...arg, ..._arg]
        console.log(typeof _arg);
        if (_arg.length === callback.length) {
          return callback(..._arg)
        } else {
          return curry(callback, ..._arg)
          // return curry
        }
      }
    }
    let newFn = curry(fn, 'http')
    console.log(newFn());
    const newFn2 = newFn('123.0.0.1', "8080", '/index.html')
    console.log(newFn2);
    console.log('-------');
    console.log(typeof []);
        
    /**
     * 
     * 沙箱模式
     * 
     * 利用了函数内"间接"的返回了一个函数
     * 
     * 外部函数 返回了一个对象,这个对象内书写多个函数
    */
     function outer() {
      //1.放置一些外部函数的私有变量
      let a = 0
      let b = 999
      const obj = {
        //2.放置若干个函数
        getA: function () {
          return a
        },
        setA: function (val) {
          a = val
        },
        getB: function () {
          return b
        },
        setB(val) {
          b = val
        }
      }
      //3.将对象返回到函数外
      return obj
    }

    const res = outer()
    let winA = res.getA()
    console.log(winA);
    res.setA(winA + 1)
    let winA2 = res.getA()
    console.log(winA2);