debounce与throttle区别

debounce与throttle区别在2011年,Twitter网站曾爆出一个问题:在主页往下滚动时,页面会变得缓慢以致没有响应。JohnResig发表了一篇文章《ablogpostabouttheproblem》指出直接在scroll事件上面绑定高消耗的事件是一个多么愚蠢的想法。现在项目中大家都会对类似的scroll或者resize事件都进行了节流控制,下述是我们经常用到,也是《JavaScript高级程序设计》-J

大家好,又见面了,我是你们的朋友全栈君。

在2011年,Twitter网站曾爆出一个问题:在主页往下滚动时,页面会变得缓慢以致没有响应。John Resig发表了一篇文章《 a blog post about the problem》指出直接在scroll事件上面绑定高消耗的事件是一个多么愚蠢的想法。现在项目中大家都会对类似的scroll或者resize事件都进行了节流控制,下述是我们经常用到,也是《JavaScript高级程序设计》- JavaScript高级技巧中提及的节流方式。

/** * 节流函数(JavaScript高级程序设计) * @param method 方法 * @param scope 当前函数执行作用域 */
function throttle(method, scope) { 
   
    clearTimeout(method.tId);
    method.tId= setTimeout(function(){ 
   
        method.call(scope);
    }, 100);
}

function resizeDiv(){ 
   
    var div = document.getElementById("myDiv");
    div.style.height = div.offsetWidth + "px";
}

// 节流在resize事件中最常用
window.onresize = function(){ 
   
    throttle(resizeDiv);
};

之前一直觉得上述代码就是实现了真正的节流,也没去深入研究。直到最近在和之前的同事讨论图表的问题,说起了“throttle和debounce”,他说我们项目中使用的不是真正意义上的throttle,而是一个debounce的简单实现。这里先简单介绍一下“throttle和debounce”,二者都是随着时间推移控制执行函数的次数来达到较少资源消耗,特别在事件触发上,尤为重要。

  • debounce(func, wait, immediate):创建并返回函数的防反跳版本,将延迟函数的执行(真正的执行)在函数最后一次调用时刻的wait毫秒之后,对于必须在一些输入(多是一些用户操作)停止之后再执行的行为有帮助。将一个连续的调用归为一个!

  • throttle(func, wait, options):创建并返回一个像节流阀一样的函数,当重复调用函数的时候,最多每隔指定的wait毫秒调用一次该函数; 不允许方法在每wait ms间执行超过一次!

举个例子:页面存在一个按钮,通过throttle和debounce包括其监听函数,wait设置为1000ms。确保在每个1000ms内都多次触发click持续2000ms。

// 执行1次(最后一次点击1000ms后)
btnDom.addEventListener('click', debounce(clickBtn, 1000)); 
// 执行3次(点击立即执行一次、1000ms后执行一次,2000ms后执行一次)
btnDom.addEventListener('click', throttle(clickBtn, 1000)); 

debounce使用场景:

第一次触发后,进行倒计wait毫秒,如果倒计时过程中有其他触发,则重置倒计时;否则执行fn。用它来丢弃一些重复的密集操作、活动,直到流量减慢。例如:

  • 对用户输入的验证,不在输入过程中就处理,停止输入后进行验证足以;
  • 提交ajax时,不希望1s中内大量的请求被重复发送。

throttle使用场景

第一次触发后先执行fn(当然可以通过{leading: false}来取消),然后wait ms后再次执行,在单位wait毫秒内的所有重复触发都被抛弃。即如果有连续不断的触发,每wait ms执行fn一次。与debounce相同的用例,但是你想保证在一定间隔必须执行的回调函数。例如:

  • 对用户输入的验证,不想停止输入再进行验证,而是每n秒进行验证;
  • 对于鼠标滚动、window.resize进行节流控制。

正真的业务场景:

一个相当常见的例子,用户在你无限滚动的页面上向下滚动鼠标加载页面,你需要判断现在距离页面底部多少。如果用户快接近底部时,我们应该发送请求来加载更多内容到页面。在此debounce没有用,因为它只会在用户停止滚动时触发,但我们需要用户快到达底部时去请求。通过throttle我们可以不间断的监测距离底部多远。

$(document).ready(function(){ 
   
  // 这里设置时间间隔为300ms
  $(document).on('scroll', throttle(function(){ 
   
    check_if_needs_more_content();
  }, 300));

  // 是否需要加载更多资源
  function check_if_needs_more_content() { 
        
    var pixelsFromWindowBottomToBottom = 0 + $(document).height() - $(window).scrollTop() - $(window).height();
    // 滚动条距离页面底部小于200,加载更多内容
    if (pixelsFromWindowBottomToBottom < 200){
      // 加载更多内容
      $('body').append($('.item').clone()); 
    }
  }
});

特别说明:

// 错误
$(window).on('scroll', function() { 
   
    debounce(doSomething, 300); 
});

// 正确
$(window).on('scroll', debounce(doSomething, 200));

下述代码,引用自underscore

debounce函数

/** * 防反跳。func函数在最后一次调用时刻的wait毫秒之后执行! * @param func 执行函数 * @param wait 时间间隔 * @param immediate 为true,debounce会在wai 时间间隔的开始调用这个函数 * @returns {Function} */
function debounce(func, wait, immediate) { 
   
    var timeout, args, context, timestamp, result;

    var later = function() { 
   
        var last = new Date().getTime() - timestamp; // timestamp会实时更新

        if (last < wait && last >= 0) {
            timeout = setTimeout(later, wait - last);
        } else {
            timeout = null;
            if (!immediate) {
                result = func.apply(context, args);
                if (!timeout) context = args = null;
            }
        }
    };

    return function() { 
   
        context = this;
        args = arguments;
        timestamp = new Date().getTime();
        var callNow = immediate && !timeout;

        if (!timeout) {
            timeout = setTimeout(later, wait);
        }
        if (callNow) {
            result = func.apply(context, args);
            context = args = null;
        }
        return result;
    };
}

throttle函数

/** * 创建并返回一个像节流阀一样的函数,当重复调用函数的时候,最多每隔 wait毫秒调用一次该函数 * @param func 执行函数 * @param wait 时间间隔 * @param options 如果你想禁用第一次首先执行的话,传递{leading: false}, * 如果你想禁用最后一次执行的话,传递{trailing: false} * @returns {Function} */
function throttle(func, wait, options) { 
   
    var context, args, result;
    var timeout = null;
    var previous = 0;
    if (!options) options = {};
    var later = function() { 
   
        previous = options.leading === false ? 0 : new Date().getTime();
        timeout = null;
        result = func.apply(context, args);
        if (!timeout) context = args = null;
    };
    return function() { 
   
        var now = new Date().getTime();
        if (!previous && options.leading === false) previous = now;
        var remaining = wait - (now - previous);
        context = this;
        args = arguments;
        if (remaining <= 0 || remaining > wait) {
            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            result = func.apply(context, args);
            if (!timeout) context = args = null;
        } else if (!timeout && options.trailing !== false) {
            timeout = setTimeout(later, remaining);
        }
        return result;
    };
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/151563.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 小程序“成语猜题”部分答案,总共28667题

    小程序“成语猜题”部分答案,总共28667题哀哀父母 可哀呀可哀,我的父母啊!原指古时在暴政下人民终年在外服劳役,对父母病痛、老死不能照料而悲哀。 哀哀欲绝 绝:断气,死。形容极其悲痛。 哀兵必胜 原意是力量相当的两军对阵,悲愤的一方获得胜利。后指受欺侮而奋起抵抗的军队,必定能取胜。 哀而不伤 哀:悲哀;伤:伤害。忧愁而不悲伤。比喻做事没有过头也无不及。 哀感天地 形容极其哀痛,使天地都为之感动。 哀感顽艳 原意是指内容凄切,文辞华丽,使愚笨和聪慧的人同样受感动。后多用来指艳情的小说、戏曲、电影

  • 随着MapReduce job实现去加重,多种输出文件夹

    随着MapReduce job实现去加重,多种输出文件夹

  • O泡果奶-APK反编译-Lua脚本

    O泡果奶-APK反编译-Lua脚本O泡果奶-APK反编译-Lua脚本反编译出的代码(有注释)–main.lua–require(“import”)import(“android.app.*”)import(“android.os.*”)import(“android.widget.*”)import(“android.view.*”)import(“android.view.View”)import(“android.content.Context”)import(“android.media.MediaPlay

  • 【前端资讯】React v16.6 发布[通俗易懂]

    【前端资讯】React v16.6 发布[通俗易懂]【前端资讯】React v16.6 发布

  • 简述ajax的实现原理_fluidsim实例讲解

    简述ajax的实现原理_fluidsim实例讲解AJAX即“AsynchronousJavascriptAndXML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。解决传统的网页(不使用AJAX)如果需要更新内容,必须重载整个网页页面。

  • 5G NR SRS (R15)[通俗易懂]

    5G NR SRS (R15)[通俗易懂]一、SRS序列对于SRS序列生成,其延续了LTE中采用的ZC序列,具体公式如下:[参考协议382115.2.2][参考协议382116.4.1.4.2]二、SRS时频资源1.时频资源NR中网络可以为终端配置一个或多个SRS资源集,多个资源集的目的可能是为了上下行多天线预编码,也有可能是为了上下行波束管理。一个SRS资源集内可以包含一个或多个SRS资源,每个SRS资源占…

    2022年10月22日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号