JavaScript Throttle & Debounce

jone5679 发布于2019-08-19 17:28 / 3144人阅读

摘要：无视一定时间内所有的调用，适合在发生频度比较高的，处理比较重的时候使用。一定间隔内没有调用时，才开始执行被调用方法。

Throttle

无视一定时间内所有的调用，适合在发生频度比较高的，处理比较重的时候使用。

var throttle = function (func, threshold, alt) {
    var last = Date.now();
    threshold = threshold || 100;

    return function () {
        var now = Date.now();

        if (now - last < threshold) {
            if (alt) {
                alt.apply(this, arguments);
            }
            return;
        }

        last = now;
        func.apply(this, arguments);
    };
};

Debounce

一定间隔内没有调用时，才开始执行被调用方法。

var debounce = function (func, threshold, execASAP) {
    var timeout = null;
    threshold = threshold || 100;

    return function () {
        var self = this;
        var args = arguments;
        var delayed = function () {
            if (!execASAP) {
                func.apply(self, args);
            }
            timeout = null;
        };

        if (timeout) {
            clearTimeout(timeout);
        } else if (execASAP) {
            func.apply(self, args);
        }

        timeout = setTimeout(delayed, threshold);
    };
};

Test

var test = function (wrapper, threshold) {
    var log = function () {
        console.log(Date.now() - start);
    };
    var wrapperedFunc = wrapper(log, threshold);
    var start = Date.now();
    var arr = [];

    for (var i = 0; i < 10; i++) {
        arr.push(wrapperedFunc);
    }

    while(i > 0) {
        var random = Math.random() * 1000;
        console.log("index: " + i);
        console.log("random: " + random);
        setTimeout(arr[--i], random);
    }
};

test(debounce, 1000);
test(throttle, 1000);

云服务器 GPU云服务器 throttle debounce asp &amp&amp逻辑 js 2&amp&amp1

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78558.html

JavaScript Debounce&amp;Throttle

摘要：如果我们的回调函数较为复杂，页面的性能就会变差。而可以保证稳定的时间间隔执行一次回调函数。但需要弄清楚的是，无论是还是，控制的都是回调函数的执行，而不是事件的监听。前言假设现在有个需求：监听滑动事件，并执行回调。当你用触摸板或者鼠标滑动页面时，每秒钟大概会触发几十次scroll事件，而当你在手机等移动终端上滑动页面时，每秒就会触发一百次scroll事件。如果我们的回调函数较为复杂，...

The question 2019-08-22 11:06 评论0 收藏0
The debounce &amp; throttle in Javascript（防抖与节流）

摘要：您的支持是我最大的动力，我会保证提供高质与清晰的文章与您共同成长。一些文章中的与上面所谈到的设置类似。防抖防抖技术允许我们捆绑多个连续调用成为单一的一次调用。防抖的应用这个简单的举个欢迎star和watch我的github issue blog，欢迎加入讨论。您的支持是我最大的动力，我会保证提供高质与清晰的文章与您共同成长。节流[throttle]与防抖[debounce]在前...

XboxYan 2019-08-23 12:46 评论0 收藏0
快速 TypeScript 化 lodash 中的 throttle &amp; debounce

摘要：背景需要包写起来爽，然而如果遇到没有现成的化的工具函数，就需要自己想办法弄出一份类型声明文件了。最为重要的是，这种迁移方面我们可以随意自定义化中所需要的工具函数，迁移粒度都可以由自己控制。 1、背景 1.1、需要 TS 包 TypeScript 写起来爽，然而如果遇到没有现成的 TS 化的工具函数，就需要自己想办法弄出一份类型声明文件了。前两天要写的小工具库（Typescript 语...

lewinlee 2019-08-26 10:18 评论0 收藏0
【源码分析】给你几个闹钟，或许用 10 分钟就能写出 lodash 中的 debounce &amp

摘要：最简单的案例以最简单的情景为例在某一时刻点只调用一次函数，那么将在时间后才会真正触发函数。后续我们会逐渐增加黑色闹钟出现的复杂度，不断去分析红色闹钟的位置。序相比网上教程中的 debounce 函数，lodash 中的 debounce 功能更为强大，相应的理解起来更为复杂；解读源码一般都是直接拿官方源码来解读，不过这次我们采用另外的方式：从最简单的场景开始写代码，然后慢慢往源码...

余学文 2019-08-26 10:19 评论0 收藏0
js中函数节流&amp;函数去抖

摘要：节流保证在一定时间内，只能触发一次。我们在尝试一下去抖消抖，消除抖动，感觉这个更好听有没有什么现成的上的一次发现源码的经历以及对学术界拿来主义的思考函数节流和函数去抖应用场景辨析函数去抖的实现开篇先提几个问题？ 1.做搜索框的时候你使用什么事件？change?blur?keyup？你想要的效果是什么？ 2.scroll事件怎么就触发？是滚一段距离触发一次？还是滚一圈触发一次？还是滚...

王军 2019-08-22 10:42 评论0 收藏0