当前位置:   article > 正文

JavaScript 防抖和节流的实现_js防抖和节流实现

js防抖和节流实现

一、防抖

1. 认识防抖

防抖:在第一次触发事件时,不立即执行函数,而是给出一个限定值,比如200ms,然后:

  • 如果在200ms内没有再次触发事件,那么执行函数
  • 如果在200ms内再次触发函数,那么当前的计时取消,重新开始计时

应用场景:

  • 输入框中频繁的输入内容,搜索或者提交信息
  • 频繁的点击按钮,触发某个事件
  • 监听浏览器滚定事件,完成某些特定操作
  • 用户缩放浏览器的resize 事件

效果:如果短时间内大量触发同一件事,只会执行一次函数。

2.防抖函数的实现

防抖函数的核心思路如下:

  • 当触发一个函数时,并不会立即执行这个函数,而是会延迟(通过定时器来延迟函数的执行)
    • 如果在延迟时间内,有重新触发函数,那么取消上一次的函数执行(取消定时器);
    • 如果在延迟时间内,没有重新触发函数,那么这个函数就正常执行(执行传入的函数);

接下来,就是将思路转成代码:

  • 定义debounce函数要求传入两个参数

    • 需要处理的函数fn;
    • 延迟时间;
  • 通过定时器来延迟传入函数fn的执行

    • 如果在此期间有再次触发这个函数,那么clearTimeout取消这个定时器;
    • 如果没有触发,那么在定时器的回调函数中执行即可;

自定义防抖函数:

function debounce(fn, delay) {
    var timer = null;
    return function () {
        if (timer) clearTimeout(timer);
        timer = setTimeout(function () {
            fn();
        },delay)
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
3. 优化参数和this

假如我们需要获取input框中输入的值,如何获取?我们知道在oninput事件触发时会有参数传递,并且触发的函数中this是指向当前的元素节点的

  • 目前我们fn的执行是一个独立函数调用,它里面的this是window,我们需要将其修改为对应的节点对象,而返回的function中的this指向的是节点对象;

  • 目前我们的fn在执行时是没有传递任何的参数的,它需要将触发事件时传递的参数传递给fn,而我们返回的function中的arguments正是我们需要的参数;

所以我们的代码可以进行如下的优化:

function debounce(fn, delay) {
  var timer = null;
  return function() {
    if (timer) clearTimeout(timer);
    // 获取this和argument
    var _this = this;
    var _arguments = arguments;
    timer = setTimeout(function() {
      // 在执行时,通过apply来使用_this和_arguments
      fn.apply(_this, _arguments);
    }, delay);
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

二、节流

1. 认识节流

节流:

  • 如果短时间内大量触发同一事件,那么在函数执行一次之后,该函数在指定的时间期限内不在工作,直至过了这段时间才重新生效

效果:

  • 在某个时间内(比如500ms),某个函数只能被触发一次

应用场景:

  • 监听页面的滚定事件

  • 鼠标移动事件

  • 搜索框input事件,要支持实时搜索可以使用节流方案

  • 用户频繁点击按钮操作

  • 游戏中的一些设计

总结:同样是密集的事件触发,但是这次密集事件触发的过程,不会等待最后一次才进行函数调用,而是会按照一定的频率进行调用。

2. 节流的实现

节流函数的默认实现思路采用时间戳的方式来完成:

  • 我们使用一个last来记录上一次执行的时间

  • 每次准备执行前,获取一下当前的时间now:now - last > interval,函数执行,并且将now赋值给last即可。

基础版:

    function throttle(fn, interval) {
        var last = 0;
        return function () {
            // this和arugments
            var _this = this;
            var _arguments = arguments;
            var now = new Date().getTime();
            if (now - last > interval) {
                fn.apply(_this, _arguments);
                last = now;
            }
        }
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

优化最后执行:

默认情况下,我们的防抖函数最后一次是不会执行的

  • 因为没有达到最终的时间,也就是条件now - last > interval满足不了的
  • 但是,如果我们希望它最后一次是可以执行的,那么我们可以让其传入对应的参数来控制

代码实现:

    function throttle(fn, interval) {
        var last = 0;
        var timer = null; // 记录定时器是否已经开启
        return function () {
            // this和arguments;
            var _this = this;
            var _arguments = _arguments;
            var now = new Date().getTime();
            if (now - last > interval) {
                if (timer) { //若已经开启,则不需要开启另外一个定时器了
                    clearTimeout(timer);
                    timer = null;
                }
                fn.apply(_this, _arguments);
                last = now;
            } else if (timer === null) { // 没有立即执行的情况下,就会开启定时器
                //只是最后一次开启
                timer = setTimeout(function () {
                    timer = null; // 如果定时器最后执行了,那么timer需要赋值为null
                    fn.apply(_this, _arguments);
                },interval)
            }
        }
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/716444
推荐阅读
相关标签
  

闽ICP备14008679号