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

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(使用前将#替换为@)

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

  • 在 Three.js 中绕点旋转对象的正确方法是什么?

    关于 Three js 的大多数教程 问题都建议使用 Three js 绕点旋转对象的方法是在要旋转的位置创建父对象 附加对象 然后移动子对象 然后 当父级旋转时 子级围绕该点旋转 例如 Make a pivot var pivot new
  • 将 Javascript 对象的属性从 string 更改为 int

    我有一个对象数组 每个对象具有三个属性 年份 总计 人均 例子 0 Object per capita 125 8 total 1007 2 year 2009 这些属性是字符串 我想创建一个循环来遍历数组并将它们转换为 int 我尝试了以
  • 可能未处理的承诺拒绝(id 0)类型错误 GET 或 HEAD 请求不允许主体

    import React from react import FlatList ActivityIndicator Text View from react native export default class FetchExample
  • Jquery 悬停卡

    我在用着http designwithpc com Plugins Hovercard http designwithpc com Plugins Hovercard 但我不知道如何在悬停卡上声明 var 每个工作描述都有自己的 ID 当悬
  • 如何阻止直接访问我的 JavaScript 文件?

    我使用 Minify 来缩小并缓存所有脚本请求 我只希望我的用户能够访问 JavaScript 文件的缩小版本 缩小位于www example com min我的脚本位于www example com scripts 如何阻止直接访问doc
  • Firebase,只得到新的孩子[重复]

    这个问题在这里已经有答案了 var firebase new Firebase firebaseRef on child added function snapshot 这将接收所有元素 有没有办法在创建新的 Firebase 引用时不接收
  • .push() 将多个对象放入 JavaScript 数组中返回“未定义”

    当我将项目添加到beats数组然后console log用户时 我得到了数组中正确的项目数 但是当我检查 length 时 我总是得到 1 尝试调用索引总是会给我 未定义 如下所示 Tom beats 1 我想我错过了一些明显的东西 但这让
  • 如何使用有角度的材料创建卡片网格?

    我正在尝试使用 ng repeat 创建每行三张卡片的网格 我有一个普通的 javascript 对象数组附加到范围 下面的代码将为每张卡创建一个新行 div div
  • 为什么 window 与 Internet Explorer 中的 window.self 不同?

    关于我如何遇到这个问题有一个复杂的背景故事 但为什么self属性不完全等于窗口本身 在 Safari 和 Firefox 及其朋友中 结果如我所料 gt window window self true gt window window se
  • ReactTransitionGroup 不适用于 React-redux 连接组件

    我正在开发一个更大的项目 但我创建了这个简短的示例来说明问题 如果我使用Box组件 它的工作原理 它在控制台中输出componentWillEnter and componentWillLeave当我们点击按钮时 如果我使用BoxConta
  • React autoFocus 将光标设置为输入值的开头

    我有一个受控输入 最初显示一个值 我已将该输入设置为自动聚焦 但当我希望它出现在末尾时 光标出现在输入的开头 我知道这可能是因为自动对焦是在值之前添加的 但我不能 100 确定 在输入字段末尾完成光标初始化的最佳方法是什么 var Test
  • React Router v4 不渲染组件

    React Router v4 渲染组件存在问题 在应用程序初始加载时 它将呈现与 URL 相对应的正确组件 但是 任何后续的组件Link单击不会呈现所需的组件 图书馆 反应路由器 4 2 2 https reacttraining com
  • 使用 JavaScript 移动页面上的按钮

    我的按钮可以移动 但奇怪的是 我无法弄清楚偏移是否有问题 我希望我的按钮随着鼠标光标移动 但现在它的移动方式不是我想要的 有时它会消失 另外 创建的新按钮是重叠的 我不知道如何解决这个问题并拥有更好的外观 var coorA var coo
  • 如何始终将焦点保持在文本框中

    我创建了一个包含两个 div 的 HTML 页面 左侧的 div 页面的 90 是 ajax 结果的目标 右侧的 div 页面的 10 包含一个文本框 该页面的想法是在文本框中输入零件编号 通过条形码扫描仪 并显示与该零件编号匹配的绘图 显
  • 如何计算特定字符在字符串中出现的次数

    我正在尝试创建一个函数来查看数组中的任何字符是否在字符串中 如果是 有多少个 我尝试计算每一种模式 但是太多了 我尝试使用 Python 中的 in 运算符的替代方案 但效果不佳 function calc fit element var
  • 使用 Google 日历源时如何禁用 FullCalendar 中的活动链接?

    我正在使用 FullCalendar 库从 Google 日历加载日历中的事件 不幸的是 事件添加到日历后 它们是可点击的 当您点击该活动时 您会自动重定向到 Google 日历页面以查看该特定活动 或者如果您有足够的访问权限 则可以直接对
  • 表单发布请求并存储收到的数据

    我有一个非常简单的表单 在提交时发出发布请求
  • 使用 Javascript 设置 cookie [重复]

    这个问题在这里已经有答案了 我正在尝试构建我的第一个移动应用程序 它需要连接到我的 mysql 数据库并使用 json 返回数据 这很好 目前我有一个登录系统 一旦确定用户名和密码存在 它就会返回一条成功消息 对于下一步 我想在我的页面上使
  • 主页(网格)上的缩略图现在显得模糊。如何纠正?

    我不知道这看起来是否愚蠢 但从早上开始我就无法纠正这个突然出现在我的博客网站上的错误www candidopinions in http www candidopinions in 我有一个网格视图模板 其中博客文章中的特色图像作为调整大小
  • 在 iOS 7 Safari 中,如何区分通过边缘滑动与后退/前进按钮的 popstate 事件?

    在 iOS 7 Safari 中 现在有两种后退 前进导航方式 使用底部的传统后退 前进按钮箭头或从屏幕边缘滑动 我正在使用动画在 ajax 应用程序中的页面之间进行转换 但如果用户通过边缘滑动进行导航 我不想触发该转换 因为这本身就是一个

随机推荐

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

    这个问题在这里已经有答案了 我想在列表中显示所有资源可绘制对象 以便用户可以选择一个 有没有办法循环遍历所有 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