13、函数防抖和函数节流

最新推荐文章于 2024-02-26 16:56:39 发布

yxiuzhu

最新推荐文章于 2024-02-26 16:56:39 发布

阅读量108

点赞数

分类专栏： JavaScript 文章标签： javascript html5 vue.js

本文链接：https://blog.csdn.net/haotian1997/article/details/114819673

版权

JavaScript 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

13.1 函数防抖和函数节流

优化高频率执行js代码的一种手段，js中的一些事件如浏览器的resize、scroll，鼠标的mousemove、mouseover，input输入框的keypress等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制。

13.2 函数防抖

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

// func是用户传入需要防抖的函数
// wait是等待时间
const debounce = (func, wait = 1000) => {
  // 缓存一个定时器id
  let timer = 0
  // 这里返回的函数是每次用户实际调用的防抖函数
  // 如果已经设定过定时器了就清空上一次的定时器
  // 开始一个新的定时器，延迟执行用户传入的方法
  return function () {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(this, arguments)
    }, wait)
  }
}

测试防抖函数

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>手写 call</title>
</head>

<body>
  <button class="btn">123</button>
  <script>
    (function () {
      const debounce = (func, wait = 1000) => {
        // 缓存一个定时器id
        let timer = 0
        // 这里返回的函数是每次用户实际调用的防抖函数
        // 如果已经设定过定时器了就清空上一次的定时器
        // 开始一个新的定时器，延迟执行用户传入的方法
        return function () {
          if (timer) clearTimeout(timer)
          timer = setTimeout(() => {
            func.apply(this, arguments)
          }, wait)
        }
      }

      let time = 0;
      const getNumber = function () {
        console.log(++time);
      }

      const btn = document.querySelector('.btn');
      btn.addEventListener('click', debounce(getNumber));
    })()
  </script>
</body>

</html>

13.3 函数节流

每隔一段时间，只执行一次函数。

// func是用户传入需要节流的函数
// wait是等待时间
const throttle = (func, wait = 50) => {
  // 上一次执行该函数的时间
  let lastTime = 0
  return function(...args) {
    // 当前时间
    let now = +new Date()
    // 将当前时间和上一次执行函数时间对比
    // 如果差值大于设置的等待时间就执行函数
    if (now - lastTime > wait) {
      lastTime = now
      func.apply(this, args)
    }
  }
}

//test:1s输出一次1
setInterval(
  throttle(() => {
    console.log(1)
  }, 1000),
  1
)

13.4 异同比较

相同点：

都可以通过使用 setTimeout 实现。
目的都是，降低回调执行频率。节省计算资源。

不同点：

函数防抖，在一个函数周期内，再次触发会清除这个事件，直到这个周期结束才能触发下一个函数。
函数节流，在一段时间内只执行一次函数。连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能。
函数防抖关注一定时间连续触发的事件只在最后执行一次，而函数节流侧重于一段时间内只执行一次

13.5 常见应用场景

函数防抖的应用场景

连续的事件，只需触发一次回调的场景有：

搜索框搜索输入。只需用户最后一次输入完，再发送请求
手机号、邮箱验证输入检测
窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

函数节流的应用场景

间隔一段时间执行一次回调的场景有：

滚动加载，加载更多或滚到底部监听
谷歌搜索框，搜索联想功能
高频点击提交，表单重复提交

yxiuzhu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
13、函数防抖和函数节流

13.1 函数防抖和函数节流优化高频率执行js代码的一种手段，js中的一些事件如浏览器的resize、scroll，鼠标的mousemove、mouseover，input输入框的keypress等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制。13.2 函数防抖在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。function debounce(fn, delay) { var timer;
复制链接

扫一扫