美文网首页
JavaScript 中的防抖与节流

JavaScript 中的防抖与节流

作者: VioletJack | 来源:发表于2021-12-23 21:38 被阅读0次

作者:只与明月听
链接:https://juejin.cn/post/7030787304696315918
来源:稀土掘金

防抖节流是开发中用的比较多的两个工具函数了,可以避免函数在短时间内大量调用。一般情况下我们可以直接使用 lodash 的防抖节流函数,下面是两种防抖节流的 JavaScript 实现。

防抖

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

function debounce(func, wait) {
    var timeout;

    return function () {
        var context = this;
        var args = arguments;

        clearTimeout(timeout)
        timeout = setTimeout(function(){
            func.apply(context, args)
        }, wait);
    }
}

节流

规定在一个单位时间内,只能触发一次函数。如果这个函数单位时间内触发多次函数,只有一次生效。

function throttle(func, wait) {
    var timeout, context, args, result;
    var previous = 0;

    var later = function() {
        previous = +new Date();
        timeout = null;
        func.apply(context, args)
    };

    var throttled = function() {
        var now = +new Date();
        //下次触发 func 剩余的时间
        var remaining = wait - (now - previous);
        context = this;
        args = arguments;
         // 如果没有剩余的时间了或者你改了系统时间
        if (remaining <= 0 || remaining > wait) {
            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            func.apply(context, args);
        } else if (!timeout) {
            timeout = setTimeout(later, remaining);
        }
    };
    return throttled;
}

相关文章

  • Javascript 基础

    1、函数防抖和函数节流 【《javascript高级程序设计》里,函数节流是这里讲的函数防抖。】函数防抖: 在事件...

  • JavaScript 中的防抖与节流

    作者:只与明月听链接:https://juejin.cn/post/7030787304696315918[htt...

  • javascript中的防抖与节流

    1、函数防抖 在事件被触发设定的秒数之后再去执行回调函数,且在一定的时间内反复触发的话会进行重新计时。函数防抖的优...

  • 函数节流与函数防抖

    函数节流与函数防抖的区别JS魔法堂:函数节流(throttle)与函数去抖(debounce)函数的防抖与节流 自...

  • JavaScript防抖与节流

    防抖(debounce)和节流(throttle)是在JS中处理高频事件时所作的一些优化操作,从而减轻浏览器负担,...

  • 函数防抖与函数节流

    debounce -- 函数防抖,throttle -- 函数节流都是在JavaScript中可以限制函数发生频率...

  • JavaScript的防抖与节流

    函数防抖 函数防抖(debounce):你尽管触发事件,但是我一定在事件触发 n 秒后才执行,如果你在一个事件触发...

  • javascript的节流与防抖

    函数节流 方法一 时间戳 方法二 定时器 函数的防抖

  • 彻底弄懂函数防抖和函数节流

    函数防抖和节流 函数防抖和函数节流:是优化高频率执行的JavaScript代码的一种手段。常用于JavaScrip...

  • 函数防抖和函数节流

    函数防抖和函数节流 函数防抖和函数节流:是优化高频率执行的JavaScript代码的一种手段。常用于JavaScr...

网友评论

      本文标题:JavaScript 中的防抖与节流

      本文链接:https://www.haomeiwen.com/subject/ovskqrtx.html