封装防抖节流函数

1.什么是防抖和节流？

接口防抖和节流是网站性能优化方案的重要组成部分之一。简单来说，防抖是指在特定的时间内只执行一次函数，而节流是指在一个时间段内才执行一次函数。

在前端开发中，通过接口防抖和节流可以有效减少网络请求和服务端负载。通过编写防抖和节流代码的方式，可以确保前端页面不会出现过多的请求数量，从而使网页加载速度更快、响应更灵敏。

防抖

在实现防抖之前，我们先来介绍一下什么是“防抖”。在前端开发中，“防抖”指的是在一定时间内只能触发一次事件，通常是输入框或滚动事件。假如没有防抖控制，页面会出现一些异常情况，例如：搜索框输入过快、滚动条跳动频繁等。

示例代码：

// 防抖
function debounce(fn, delay) {
  let timer = null;
  return function(...args) {
    if (timer !== null) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.apply(this, args);
      timer = null;
    }, delay);
  };
}

// 测试
function task() {
  console.log('run task')
}

// 调用
debounce(task,2000)

节流

相比于防抖技术，节流技术更加灵活。在前端开发中，“节流”通常指的是在一定时间内只能执行一次事件，例如：下拉加载更多、页面滚动等

示例代码：

// 节流
function throttle(fn, delay = 500) {
  let last = 0;
  return function(...args) {
    let now = new Date().getTime();
    if (now - last > delay) {
      last = now;
      fn.apply(this, args);
    }
  };
}
//测试
function task() {
  console.log('run task')
}
//调用
throttle(task, 2000)