防抖和节流的介绍以及使用

js中的防抖和节流

为什么需要防抖和节流呢？

防抖和节流主要用于优化项目的。就比如说,我们在做搜索操作的时候，如果不用防抖的话用户在输入要搜索的内容时，输入一个字它就要向后台请求一次，这样频繁的切换会给服务器增加很大的压力，用户体验也不好，为了解决这一问题，我们就用到了防抖和节流。

函数防抖和函数节流，两者都是优化高频率执行js代码的一种手段。

• 防抖：在一段固定的时间内，只能触发一次函数，在多次触发事件时，只执行最后一次。

  防抖可以应用在输入框搜索，控制调用接口的频率。也可以用来监听窗口的变化。

  本质：防抖动是将多次执行变为最后一次执行

• 节流：指定时间间隔内只会执行一次任务（一定时间内js方法只跑一次)

  节流可以应用在监听滚动条的位置，或者频繁点击按钮的优化。

  本质：节流是将多次执行变成每隔一段时间执行

1.防抖 触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间

const debounce = (ms) => {
  return new Promise((resolve, reject) => {
     // 要检查，如果已存在，先清除
     if (debounce.timerId) clearTimeout(debounce.timerId)
      debounce.timerId = setTimeout(resolve, ms)
  })
}

debounce(300).then(() => console.log('hehe'))

2.节流 高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率

// const delay = (ms) => {
//   return new Promise((resolve, reject) => {
//     return setTimeout(resolve, ms)
//   })
// }
const delay = (ms) => new Promise((resolve, reject) => setTimeout(resolve, ms))

delay(3000).then(() => console.log('ggsmd'))

3.可以用第三已经包装好了的防抖-----lodash