JS中的局部实现细节控制的原则--笔记

• once函数
  • 使用场景
    • 只允许回调函数只执行一次的方法
    • 异步请求数据（提交表单的时候）

// 抽象一个 once高阶函数,返回函数
// 过程抽象的方法 来抽象出一个once函数

function once(fn){
  return function(...args){
    if(fn){
      let ret = fn.apply(this, args);
      fn = null;
      return ret;
    }
  }
}

// 最新浏览器可以这样写,保证只点击一次,ie比较老的版本可能会不支持
 block.addEventListener('click',()=>{
 // do something
},{once: true})

---

• 节流
  • 使用场景
    •  在很大的元素或者画布上监听 浏览器滚轮,mousemove事件，触发频率很高的时候就需要使用节流函数，来解节约资源

  function throttle(fn, time = 500){
  let timer;
  return function(...args){
    if(timer == null){
      fn.apply(this,  args);
      timer = setTimeout(() => {
        timer = null;
      }, time)
    }
  }
}

• debounce
  • 使用场景

  • 用户行为最终状态，比如点按钮很多次连续点的时候，只执行一次。避免用户重复提交

//  debounce函数
function debounce(fn, dur){
  dur = dur || 100;
  var timer;
  return function(){
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, dur);
  }
}

• 消费者：执行方法的时候不会直接执行，而是把它放到任务队列里；每个多少毫秒去执行它。由此将同步的操作变成异步的操作。

    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)
        }
      }
    }

function iterative(fn){
  return function(...args){
    return args.reduce(fn.bind(this))
  }
}

once throttle debounced consumer iterative都是高阶函数

它们自身输入函数或返回函数，被称为高阶函数