这是我参与「第五届青训营 」伴学笔记创作活动的第 7 天

一、本次笔记的重点内容：

• js高阶函数介绍

• 使用高阶函数解决一些问题

  1.防止连续点击

  2.防抖

  3.延迟调用

二、介绍：

1.介绍

JavaScript中的高阶函数是指接受函数作为参数或返回函数的函数。这种函数允许你在 JavaScript 中实现一些高级技巧，比如把函数当作数据处理的基本单元来使用。

2.基本使用

• 以函数作为参数
• 以函数作为返回值
• 常用于作为函数装饰器

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

三、例子演示：

1.防止连续点击

我们首先设置好连续点击所需的间隔，这边设置的是500ms，

设置好一个参数timer作为判断条件。

如果timer为null，动态调用方法，在此期间，此方法失效，故不能连续点击，当过time ms之后，timer又为null，之后又可以调用此方法，从而做到防止连点的效果。

代码如下：

 function throttle(fn,time=500){
        let timer;
        return function(...args){
            if(timer==null){
                fn.apply(this.args);
                timer=setTimeout(()=>{
                    timer=null;
                },time)
            }
        }
    }
  var circle=document.getElementsByClassName('circle')[0]
  var btn=document.getElementsByClassName('btn')[0]

    btn.onclick=throttle(function(e){
    circle.innerHTML=parseInt(circle.innerHTML)+1;
    circle.className='fade';
    setTimeout(()=>{
        circle.className='circle'
    },250)
    })

效果：

点击之后：

过500ms后恢复颜色

2.防抖

由于课上的小鸟移动的防抖我没有材料，就自己简单写了一下输入的防抖

大概意思是一段频繁触发的事件,只有当我停止触发一段时间后才会执行,否则就直接不执行,这个事件称为防抖，我们同样用高阶函数进行解决

    document.querySelector('input').addEventListener('input',  debounce(testFn))
    function debounce(fn) {
        let timer = null
        return function (...args){
            clearTimeout(timer)
            timer = setTimeout(() =>{
                fn.apply(this, args)
            }, 500)
        }
    }
    function testFn(e) {
        console.log( document.querySelector('input').value)
    }

效果：

当我输入的时候，并不会执行log

输入完毕后，才执行log打印出input的value值

除了输入框，防抖也可以运用于鼠标移动，拖拽等地方。

3.延迟调用

延迟调用指的是方法延迟调用，每隔一段时间调用一次，短时间内执行多次并不会因为设置了时间间隔而不执行后面的方法。

var btn = document.querySelector("button");
  var count = document.querySelector("span");
  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);
      }
    };
  }
  btn.onclick = consumer((evt) => {
    let t = parseInt(count.innerHTML) + 1;
    count.innerHTML = t;
  }, 800);

效果图：

迅速点击多次后，会按我们设置好的每500ms再执行每次的点击任务，记录好所有的点击次数依次执行

四、总结：

本次笔记学习了高阶函数的运用，了解了

1.防止连续点击

2.防抖

3.延迟调用

等代码书的写和理解，希望上述代码也可以帮助到大家理解高阶函数的运用