高阶函数 ｜ 青训营笔记

这是我参与「第四届青训营」笔记创作活动的第2天，在上如何写好javascript这门课程时，老师讲到了高阶函数这一个概念，因为我是第一次接触这个概念，所以记录下这篇笔记来巩固相关知识点。

什么是高阶函数：

1. 以函数作为参数或者以函数作为返回值，满足其中一个条件即可称之为高阶函数；
2. 一般都是纯函数；
3. 常用于作为函数装饰器；
4. 常见的高阶函数有：Promise、setTimeout、arr.map()等等。

function HOF0(fn) {
    return function(...args) {
        return fn.apply(this, args);
    }
}

开发中常用的高阶函数

引出问题：浏览器的scroll（滚动条滚动）、keypress（按动按键）、mousemove（鼠标移动）等等事件在出发时，都是会不断的调用绑定在事件上的回调函数高频触发，如果回调函数复杂就会导致响应跟不上触发，有可能会造成页面的卡顿，极大地浪费资源，降低前端的性能。那么我们就可以使用防抖和节流函数来解决这些问题。

防抖函数

1. 作用：对在短时间内多次触发事件的回调函数，只执行最后一次，或者只在最开始时执行
2. 代码示例：

function debounce(func, delay){
  let timer = null;
  return function(...args){
        if(timer)
          clearTimeout(timer);
        timer = setTimeout(()=>{
          func.apply(this, args);
          timer = null;
        }, delay)
  }
}

function res(){
  console.log('debounce');
}
window.addEventListener('resize', debounce(res, 1000))

节流函数

1. 作用：类似于防抖，不过节流是在一段时间之内只允许该函数执行一次
2. 代码示例：

function throttle(fn, delay){
  let timer = null
  return function(...args){
        if(!timer){
          timer = setTimeout(() => {
                fn.apply(this, args)
                timer = null
          }, delay)
        }
  }
}
function res(){
  console.log('throttle');
}
window.addEventListener('resize', throttle(res, 1000))

总结

以上两个高阶函数都适用于高频触发事件，根据不同场景选择合适的方法。对于有停顿的高频触发事件建议选择防抖，然而对于高频触发并且连续的事件，选择节流。