Javascript防抖与节流之间的区别和应用（微信小程序）

最新推荐文章于 2023-03-02 17:36:55 发布

橘子y

最新推荐文章于 2023-03-02 17:36:55 发布

阅读量251

点赞数

分类专栏： js 前端

本文链接：https://blog.csdn.net/yupyuping/article/details/113253167

版权

前端同时被 2 个专栏收录

36 篇文章 2 订阅

订阅专栏

10 篇文章 0 订阅

订阅专栏

节流概念(Throttle)

按照设定的时间固定执行bai一次函数，比如200ms一次。注意：固定就是你在mousemove过程中，执行这个节流函数，它一定是200ms（你设定的定时器延迟时间）内执行一次。没到200ms，一定会返回，没有执行回调函数的。

主要应用场景有：scroll、touchmove

防抖概念(Debounce)

抖动停止后的时间超过设定的时间时执行一次函数。注意：这里的抖动停止表示你停止了触发这个函数，从这个时间点开始计算，当间隔时间等于你设定时间，才会执行里面的回调函数。如果你一直在触发这个函数并且两次触发间隔小于设定时间，则一定不会到回调函数那一步。·

主要应用场景有：input验证、搜索联想、resize

节流实现

思路：

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

<head>
    <meta charset="UTF-8">
    <title>防抖节流函数</title>
</head>

<body>
    <button id="btn2">点击节流函数</button>
    <script>
        /**
         * @desc 函数节流
         * @param func 函数
         * @param wait 延迟执行毫秒数
         * @param type 1 表时间戳版，2 表定时器版
         */
        function throttle() {
            var previous = 0;
            return function () {
                let now = Date.now();
                let context = this;
                let args = arguments;
                if (now - previous > 1000) {
                    previous = now;
                    console.log(111);
                }
            }
        }
        document.querySelector('#btn2').addEventListener('click', throttle())
    </script>
</body>

</html>

防抖实现

思路：首次运行时把定时器赋值给一个变量，第二次执行时，如果间隔没超过定时器设定的时间则会清除掉定时器，重新设定定时器，依次反复，当我们停止下来时，没有执行清除定时器，超过一定时间后触发回调函数。

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

<head>
    <meta charset="UTF-8">
    <title>防抖节流函数</title>
</head>

<body>
    <button id="btn">点击防抖函数</button>
    <script>
        //500毫秒内多次触发只会执行一次，
        function de(fnc, wait) {
            let timer;
            return function () {
                let ctx = this
                let args = arguments
                if (timer) clearTimeout(timer); //如果500毫秒内又一次触发，则会重新计算时间
                timer = setTimeout(() => {
                    timer = null
                    fnc.apply(ctx, args)
                    console.log('防抖');
                }, wait)
            }
        }
        document.querySelector('#btn').addEventListener('click', de(function () {
            console.log(2);
        }, 500))

    </script>
</body>

</html>

微信小程序如何实现防抖节流

在专门的通用工具文件里面封装，utils/debounce.js

// // 防抖函数
function debounce(fun, delay = 300) {
  let timer;
  return function () {
    let ctx = this
    let args = arguments
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      timer = null
      fun.apply(ctx, args)
      console.log("防抖");
    }, delay)
  }
}

export default {
 debounce
 }

在页面中调用：

  clickBtn: commonTools.debounce(function (e) {
    console.log(e);
    this.a1(e)
  }, 500),
  a1(e) {
    console.log("调用函数", e);
  },

橘子y

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript防抖与节流之间的区别和应用（微信小程序）

节流概念(Throttle)按照设定的时间固定执行bai一次函数，比如200ms一次。注意：固定就是你在mousemove过程中，执行这个节流函数，它一定是200ms（你设定的定时器延迟时间）内执行一次。没到200ms，一定会返回，没有执行回调函数的。主要应用场景有：scroll、touchmove防抖概念(Debounce)抖动停止后的时间超过设定的时间时执行一次函数。注意：这里的抖动停止表示你停止了触发这个函数，从这个时间点开始计算，当间隔时间等于你设定时间，才会执行里面的回调函数。如果
复制链接

扫一扫

专栏目录