通过参数对函数调用进行反跳

2024-02-25

David Walsh 拥有出色的去抖动实现here https://davidwalsh.name/javascript-debounce-function.

// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

我在生产中使用它并且效果很好。

现在我遇到了一些更复杂的去抖需求情况。

我有一个事件调用带有如下参数的事件处理程序: $(elem).on('onSomeEvent', (e) => {handler(e.X)} );

我可以接受频繁触发此事件并每秒调用处理程序 1000 次。我不需要对处理程序本身进行反跳。 但就我而言,对于每个 e.X,我希望它在一个周期内仅被调用一次,比如 250 毫秒。

我正在考虑创建一个二维数组来保存 x 和最后一次运行时间,但我不想声明任何全局变量。

有任何想法吗?

* EDIT *

阅读@Tim Vermaelen 的回答后,我已经像这样实现了它,并且它有效:

export function debounceWithId(func, wait, id, immediate?) {
        var timeouts = {};
        return function () {
            var context = this, args = arguments;
            var later = function () {
                timeouts[id] = null;
                if (!immediate) func.apply(context, args);
            };
            var callNow = immediate && !timeouts[id];
            clearTimeout(timeouts[id]);
            timeouts[id] = setTimeout(later, wait);
            if (callNow) func.apply(context, args);
        };
    };

我经常使用的是以下内容:

var debounce = (function () {
    var timers = {};

    return function (callback, delay, id) {
        delay = delay || 500;
        id = id || "duplicated event";

        if (timers[id]) {
            clearTimeout(timers[id]);
        }

        timers[id] = setTimeout(callback, delay);
    };
})(); // note the call here so the call for `func_to_param` is omitted

我不认为您的解决方案有太大区别,除了我可以在事件中添加唯一的 id 之外。你必须把它包裹起来handler(e.X)如果我理解正确的话。

debounce(func_to_param, 250, 'mousewheel');
debounce(func_to_param, 250, 'scrolling');
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

通过参数对函数调用进行反跳 的相关文章

  • javascript中怪异模式的元素宽度?

    我一直在浏览所有流行的 js 库 但我找不到一个具有 DOM 元素宽度函数的库 该函数实际上可以解释 Internet Explorer 中的怪异模式 问题是 当启用怪异模式时 填充和边框不会计入宽度 据我所知 当省略 doctype 或将
  • 在淘汰赛应用程序中使用 setInterval 进行轮询实现?

    我正在尝试使用 setInterval 实现简单的轮询机制 我有一个视图模型如下 define knockout jquery function ko function ViewModel var self this setInterval
  • 将随机字符串转换为十六进制颜色

    我的应用程序中有一个操作日志表 我想根据该条目的 sessionID 为行分配随机颜色 以帮助查看模式 分组操作 到目前为止我有这个 console log stringToColorCode mj3bPTCbIAVoNr93me1I fu
  • 用不同的颜色为 Google 热图着色

    我试图开发一个遵循 Google Map API 的热度 https developers google com maps documentation javascript examples layer heatmap https deve
  • Angular.js:未捕获的错误,没有模块:myapp

    我也在尝试引导 angular js 项目 这是我的index html div p Loading p div
  • Access-Control-Allow-Headers 不允许请求标头字段 Access-Control-Allow-Headers

    我试图通过发布请求将文件发送到我的服务器 但是当它发送时会导致错误 Access Control Allow Headers 不允许请求标头字段 Content Type 所以我用谷歌搜索了错误并添加了标题 http post rootSc
  • 在 Javascript 中动态添加事件处理程序

    我在使用 Javascript 时遇到了一个奇怪的问题 我得到的是一个特定格式的字符串 我将尝试用它创建一个表 该表每行只有一个单元格 字符串的格式为 每个单元格 行 需要显示内容 将传递给的参数onmouseover当用户将鼠标移动到显示
  • Child_process 处理带有回车符 (\r) 的 STDOUT 流

    我正在编写一个简单的应用程序 它允许工作中的内部系统请求从远程服务器到使用 REST 调用发起的另一个远程服务器的复制过程 使用 rsync 我已经对express框架足够熟悉 并且刚刚开始尝试child process库 并偶然发现了一个
  • 如何获取传单标记簇中点击事件的图块?

    这是我的代码 function onMapClick e e originalEvent defaultPrevented true var orig e originalEvent console log orig target map
  • 通过 Javascript 将图像切割成碎片

    我正在创建一个简单的拼图游戏 为了做到这一点 我需要将我正在使用的图片切成 20 块 Javascript 有没有办法将一张图片切成 20 个相等的部分 并将它们保存为网页中的 20 个不同的对象 或者我只需要进入 Photoshop 自己
  • Ajax JSON 数据和灯箱冲突

    我有一个带有灯箱插件的画廊设置光廊 http sachinchoolur github io lightGallery docs 该画廊与静态 HTML 完美配合 当我动态抓取 API 数据并尝试让灯箱处理这些项目时 问题就出现了 我似乎无
  • 覆盖函数(例如“警报”)并调用原始函数?

    我想用调用原始版本的新版本覆盖 Javascript 内置函数 类似于用调用的版本覆盖类上的方法 super有多种语言版本 我怎样才能做到这一点 例如 window alert function str do something addit
  • 嵌套辅助函数和性能

    嵌套辅助函数对于使代码更易于理解非常有用 谷歌甚至建议在他们的应用程序中使用嵌套函数时尚指南 https google styleguide googlecode com svn trunk javascriptguide xml Nest
  • Javascript 正则表达式来匹配正则表达式

    我正在研究一个特殊的正则表达式来匹配 javascript 正则表达式 现在我有这个正则表达式工作 i g m 例如 foo match i g m gt foo foo undefined foo i match i g m gt foo
  • Sequelize.js - “不关联到”

    我在从数据库获取完整数据时遇到一些问题 那是我的模型 User module exports function sequelize DataTypes return sequelize define user id type DataTyp
  • 为 Meteor 数据创建编号列表

    有没有办法获取 Meteor 集合中项目的编号列表的 编号 我知道我可以在 html 中做到这一点 但我觉得如果我可以在 spacebars 中放置一些东西 那么样式会更容易 如果我可以使用更好的术语 请告诉我 像这样的东西 前 20 部电
  • Cosmos DB 中的 MaxItemCount 源选项属性不起作用

    我正在尝试编写一个运行 SQL 查询的简单存储过程 并且我想通过使用 MaxItemCount 属性来限制结果 查询生成 3 个文档 但我只想返回 1 个文档 我使用 MaxItemCount 属性强制执行此限制 但这似乎不起作用 func
  • 如何查看网站浏览者的操作系统?

    我运行的是 Ubuntu 8 04 最近在访问网站时收到以下错误 请使用运行 Windows 98 2000 Me NT 或 XP 的计算机返回 www site com 网站如何知道我正在运行哪个操作系统 是仅通过 javascript
  • 允许使用 grunt browserify 进行全局转换

    我已将 jQuery 添加为 html 文件中的脚本标记 并将其添加到package json与一起工作browserify shim如下 browserify transform browserify shim browserify sh
  • Nodejs 一个接一个地运行异步函数

    我是 JS nodejs 的新手 所以如果我不能提出切中要害的问题 请原谅我 所以基本上 如果我有两个异步函数 async function init async function main 如何确保在 init 完成其异步请求后调用 ma

随机推荐

  • 如何显示资源可绘制列表[重复]

    这个问题在这里已经有答案了 我想在列表中显示所有资源可绘制对象 以便用户可以选择一个 有没有办法循环遍历所有 R drawable 项目 这样我就不必将它们硬编码到我的程序中 使用可绘制类上的 getFields 方法 您可以迭代整个可绘制
  • Jquery 依赖下拉框填充 - 如何

    我有依赖的下拉框 如下面的场景所示 有人可以建议如何使用 JQuery Javascript 实现结果吗 设想 HH1
  • 在 PowerShell 版本 2 中将字符串转换为字节数组

    我想做的是使用 SHA1 UTF 8 加密 然后使用 base64 编码和密码字符串值 然而 我需要先进行加密 然后再进行编码 但我却反过来做了 这是代码 Create Input Data enc system Text Encoding
  • 如何从 SQL 二进制字段获取单个字节

    我在 SQL Server 中有一个二进制字段 我想在 SQL 函数中一次读取一个字节 在代码中我将使用字节数组 SQL 中有等效的吗 我用谷歌找不到任何东西 SUBSTRING 函数应该足够了 一个简单的例子 假设表 MyTable 的列
  • 使用 jquery/javascript 增加点击时的 CSS 亮度颜色?

    因此 如果我有一个文本 Click Me to Brighten 它具有某种深绿色十六进制颜色 如 00801a 的CSS颜色属性 我想将其设置为当我单击它时 它会使其变为浅绿色 同样 如果它是某种蓝色 单击它会使它变浅蓝色 基本上我想知道
  • 可可:框架和边界有什么区别?

    UIView及其子类都具有以下属性frame and bounds 有什么不同 The bounds of an UIView http developer apple com iPhone library documentation UI
  • 适用于 Java、Python、Ruby、Node.JS 和 PHP 的开放支付网关库

    我正在寻找支持许多不同支付处理器 API 的通用开源支付库 换句话说 我想开发一个使用单一支付处理 API 的应用程序 但能够轻松地在支付网关之间切换 例如 Authorize Net Payflow Pro Braintree PayPa
  • 信号器程序集加载问题 OWIN

    我在尝试加载类时收到此错误Microsoft AspNet SignalR Owin集会 执行离开后抛出异常Configuration中的方法startup cs 我已经注册了一个全局异常处理程序来尝试捕获异常 但它没有被捕获 public
  • 警报显示使用已弃用的 HREF 而没有绝对 URL

    Facebook 开发者页面中的消息提醒我的网站当前正在使用以下已弃用的功能 社交插件 Like Button Like Box 中没有绝对 URLhref范围 此问题必须在 2013 年 7 月之前解决 我猜它正在谈论 喜欢 的 data
  • TDirect2DCanvas 速度慢还是我做错了什么?

    在寻找替代 GDI 的替代品时 我试图测试 Delphi 的 2010TDirect2D画布Windows 7 中的性能 我通过使用 Direct2D 绘制一条巨大的折线来测试它 结果速度慢得离谱 即使数据量比我使用 GDI 运行相同测试的
  • Instagram API 不返回关注者

    我已通过 Instagram 进行身份验证 并且获得了具有范围的访问令牌follower list 然后我尝试获取我的关注者列表 https api instagram com v1 users self followed by acces
  • 未知的指令类型“toctree”。 Pycharm 出错,但 index.html 有效

    在 PyCharm 中工作时 我在 Sphinx 中创建的文档的预览模式显示 System Message ERROR 3
  • “Where like”子句使用 2 列的串联值与雄辩

    我有一个查询 在多个列中搜索一个术语 其中之一必须是全名 我已将姓名和姓氏分开 因此在搜索时必须连接这两个值 我现在只有搜索名字 我如何将连接添加到姓氏 我正在调查突变体 但我不知道这是否是正确的方法 public function sea
  • 初学者的 C 套接字编程

    我刚刚开始学习套接字编程 发现它非常有趣 目前我正在制作服务器和客户端在同一台计算机上因此我可以拥有IP地址作为环回地址 127 0 0 1一切似乎都运行良好 但现在我正在考虑拥有两台计算机并做这件事 我有以下问题 假设一台计算机是服务器
  • Android SQLiteConstraintException:错误代码19:约束失败

    我已经看到了有关此异常的其他问题 但所有这些问题似乎都通过解决方案解决了 即已存在指定主键的行 对我来说似乎并非如此 我尝试用双引号替换字符串中的所有单引号 但出现了同样的问题 我正在尝试通过执行以下操作将一行插入到我创建的 SQLite
  • 使用 T & F 代替 TRUE & FALSE 有什么问题吗?

    我注意到使用T and F代替TRUE and FALSER 中的函数给了我相同的结果 当然 T and F更简洁 但是 我明白了TRUE and FALSE被更频繁地使用 我想知道两者之间有什么区别吗 使用有什么问题吗T and F T
  • oracle sqlplus中获取sql脚本的执行时间

    我有一个脚本 用于将数据加载到 Oracle 中的表中 通过插入语句列表 如何获取整个加载过程的执行时间 我尝试过set timing on 但这给了我每个插入语句的持续时间 而不是整个过程的持续时间 脚本如下所示 spo load log
  • 是否可以将 supertest 与 hapi 一起使用?

    我用的是hapi 不是express 超级测试还应该有效吗 如果是这样 有没有一种快速方法可以更改我的代码以使其运行 我的测试看起来像这样 基于文档 https github com visionmedia supertest import
  • 如何在 Mockito 中模拟 CompletableFuture 的完成

    我想模拟当某个代码被调用时CompletableFuture已成功完成 我有这门课 public class MyClassImplementRunner implements Runnable private final String p
  • 通过参数对函数调用进行反跳

    David Walsh 拥有出色的去抖动实现here https davidwalsh name javascript debounce function Returns a function that as long as it cont