青训营笔记 | 高阶函数用法和用途

once函数

有些情况下，我们希望一个函数只能执行一次，而防止后续执行出现不必要的错误，这个时候我们就需要实现once函数，它要求传入函数只能执行一次，且第二次以及之后再调用时，只返回第一次执行的值。

思路以及实现

使用闭包

// 保留第一次结果
function once(fn) { 
    let ret; // 缓存结果用 
    return function(...args) { 
        if (!fn) return ret; 
        ret = fn(...args); 
        fn = undefined; // 表示已经执行过一次 
        return ret; 
    } 
}
// 不保留第一次结果
function once(fn) {
    return function(...args) {
      if(fn) {
        const ret = fn.apply(this, args);
        fn = null;
        return ret;
      }
    }
  }

throttle节流函数

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

应用

1. 懒加载要监听计算滚动条的位置，使用节流按一定时间的频率获取
2. 用户点击提交按钮，假设我们知道接口大致的返回时间的情况下，我们使用节流，只允许一定时间内点击一次。 这样，在某些特定的工作场景，我们就可以使用防抖与节流来减少不必要的损耗。

    window.onload = function() {
      // 1、获取按钮，绑定点击事件
      var myThrottle = document.getElementById("throttle");
      myThrottle.addEventListener("click", throttle(sayThrottle));
    }

    // 2、节流函数体
    function throttle(fn) {
      // 4、通过闭包保存一个标记
      let canRun = true;
      return function() {
        // 5、在函数开头判断标志是否为 true，不为 true 则中断函数
        if(!canRun) {
          return;
        }
        // 6、将 canRun 设置为 false，防止执行之前再被执行
        canRun = false;
        // 7、定时器
        setTimeout( () => {
          fn.call(this, arguments);
          // 8、执行完事件（比如调用完接口）之后，重新将这个标志设置为 true
          canRun = true;
        }, 1000);
      };
    }

    // 3、需要节流的事件
    function sayThrottle() {
      console.log("节流成功！");
    }

防抖函数

任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。

function debounce(fn) { 
// 利用闭包创建一个标记用来存放定时器的返回值 
    let timeout = null; 
    return function() { 
        // 每次当用户点击/输入的时候，把前一个定时器清除 
        clearTimeout(timeout); 
        // 然后创建一个新的 setTimeout， 
        // 这样就能保证点击按钮后的 interval 间隔内 
        // 如果用户还点击了的话，就不会执行 fn 函数 
        timeout = setTimeout(() => { 
            fn.call(this, arguments); 
        }, 1000); 
    }; 
}

consumer函数

多次调用函数后，按指定间隔执行函数，类似于队列

function consumer(fn, time){
  let tasks = [],
      timer;
  
  return function(...args){
    tasks.push(fn.bind(this, ...args));
    if(timer == null){
      timer = setInterval(() => {
        tasks.shift().call(this)
        if(tasks.length <= 0){
          clearInterval(timer);
          timer = null;
        }
      }, time)
    }
  }
}