手写debounce

函数防抖概念

在开发过程中经常使用函数防抖，举个例子，当用户在input框开始输入内容的时候就开始请求，很显然，这样的做法会使得前端不断地向服务器做请求，而且用户体验还不好，因此我们用到了函数防抖，即是任务频繁触发时，只有触发间隔时间超过指定时间时，任务才会执行。

手写debounce

在开发过程中，可以使用lodash的debounce，但是想自己写一个，原理就是创建一个定时器，每当触发事件时，就会重置定时器，这样也就是触发事件后不会直接执行，需要等指定时间后触发。

简单实现

/**
 * @param {*} fn 需要执行的函数
 * @param {*} wait  等待的时间
 * @returns
 */
function debounce(fn, wait) {
  let timer = null; // 定时器
  let flag = false; // 是否进行过一次请求
  // 返回函数
  return function (event) {
    // flag为true时，说明已经支付过一次了，再次触发，需要重新计时
    // 需要将上次的timer清除掉，并将timer赋值于null，flag变成false
    if (flag) {
      clearTimeout(timer);
      timer = null;
      flag = false;
    }
    // 查看是否有定时器，如果有，则重置定时器，并将null赋值于timer           
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }
    // 延时，如果执行了fn，则将flag转变为true
    timer = setTimeout(() => {
      console.log(event.target.value);
      fn.apply(this, [event.target.value]);
      flag = true;
    }, wait);
  }
}

demo测试

  document.getElementById('debounce').addEventListener('keyup', debounce(request, 1000));

function request(content) {
  console.log('request' + content);
}

测试通过

总结

自己手写的debounce其实还是很狭隘的，只能适用于自己的demo，在项目过程中可以用现有的轮子，但是通过自己写，可以复习到一些知识点，比如闭包，高阶函数等等，第一次写掘金，紧张，就这样啦~~~~