天道酬勤,学无止境

Typescript debounce function not calling function passed as parameter

I'm trying to write a debounce function with typescript.

I found an example of it in here. Code follows:

export function debounce<Params extends any[]>(
  func: (...args: Params) => any,
  timeout: number,
): (...args: Params) => void {
  let timer: NodeJS.Timeout
  return (...args: Params) => {
    clearTimeout(timer)
    timer = setTimeout(() => {
      func(...args)
    }, timeout)
  }
}

Problem is:

  • Function passed as a parameter is not getting called after the specified timeout
  • I can't use lodash or any other external library because I'm trying to avoid adding new dependencies to this project.

Thanks.

评论

How do you use your debounce function? I prepare fiddle, you can check working solution here

function debounce<Params extends any[]>(
  func: (...args: Params) => any,
  timeout: number,
): (...args: Params) => void {
  let timer: NodeJS.Timeout
  return (...args: Params) => {
    clearTimeout(timer)
    timer = setTimeout(() => {
      func(...args)
    }, timeout)
  }
}

function test(message) {
  alert(message);
}

const debouncedTest = debounce(test, 2000);

debouncedTest('message');

Well, it's not typescript troubles

This is intended as a supplement to Saveli Tomac's excellent answer.

In the comments I said I didn't think that implementation was particularly good. In particular it has two problems:

  1. It doesn't have an immediate option. Most debounce implementations in the wild (including the one you linked in your question) have this.
  2. The returned function ignores the this value.

Here's an example that fixes these:

const debounce = (n: number, fn: (...params: any[]) => any, immed: boolean = false) => {
  let timer: number | undefined = undefined;
  return function (this: any, ...args: any[]) {
    if (timer === undefined && immed) {
      fn.apply(this, args);
    }
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), n);
    return timer;
  }
};

Typescript Playground

If the result of the function is useful for you, you can try the extension methods that I wrote for the function interface:

https://gist.github.com/falahati/fda618a9b59bb7d7f33b9ba0d5ef01a3

Usage is as simple as creating a debounce or throttled version of your function by using the trailingDebounce(wait: number), leadingDebounce(wait: number), trailingThrottle(wait: number) or the leadingThrottle(wait: number) function. Here is an example:


class RelativeOffsetCalculator {
    public addOffsetTrailingDebounce = this.addOffset.trailingDebounce(500);
    public addOffsetLeadingDebounce = this.addOffset.leadingDebounce(500);
    public addOffsetTrailingThrottle = this.addOffset.trailingThrottle(500);
    public addOffsetLeadingThrottle = this.addOffset.leadingThrottle(500);

    private _offset: number;

    constructor(offset: number) {
        this._offset = offset;
    }

    public addOffset(base: number): number {
        return base + this._offset;
    }
}

const instance = new RelativeOffsetCalculator(1);
let executions = 0;

// Call each 100ms for 10 times at a total of a second, should get limited
const intervalTimer = window.setInterval(
    () => {
        if (executions >= 10) {
            window.clearInterval(intervalTimer);
            return;
        }

        instance.addOffsetLeadingDebounce(executions).then(
            (result) => console.log(result),
            (error) => console.warn(error),
        );
        executions++;
    },
    100,
);

// A later call at 2 seconds mark, should not get limited
window.setTimeout(
    () => {
        instance.addOffsetLeadingDebounce(100).then(
            (result) => console.log("Late Execution: ", result),
            (error) => console.warn("Late Execution: ", error),
        );
    },
    (10 * 100) + 1000,
);

This results in:

1 1 1 1 1 1 1 1 1 1 Late Execution: 101,

If the addOffsetTrailingDebounce function is used, the results are:

10 10 10 10 10 10 10 10 10 10 Late Execution: 101

and if the addOffsetLeadingThrottle function is used, the results are:

1 1 1 1 1 5 5 5 5 5 Late Execution: 101

and if the addOffsetTraillingThrottle function is used, the results are:

5 5 5 5 5 10 10 10 10 10 Late Execution: 101

export const debounce = (callback: (...params: any[]) => any, delay:number) => {
    let inDebounce: ReturnType<typeof setTimeout>;

    return function (this:any, ...args: any[]) {
        clearTimeout(inDebounce);
        inDebounce = setTimeout(() => callback.apply(this, args), delay);
    };
};

window.addEventListener('scroll', debounce(() => console.log('test'), 250));

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • Javascript:如何调整我的 debounce 函数以采用 IF 条件?(Javascript: How do I tweak my debounce function to take an IF conditional?)
    问题 我发现了一个错误,并对其进行了追踪。 您可以在此处查看我的代码的简化示例。 事实证明,我需要去抖动我的if()语句而不是去抖动函数本身。 我想将 debounce 作为独立函数保留,但我不确定如何传入条件。 任何指针? 这是代码: var foo = function(xyz) { alert(xyz); }; function setter(func, arg1, arg2) { return { fn: func, arg1: arg1, arg2: arg2 }; } function debounce(someObject) { var duration = someObject.arg2 || 100; var timer; if (timer) { clearTimeout(timer); } timer = setTimeout(function() { someObject.fn(someObject.arg1); timer = 0; }, duration); } var toggle = true; if (toggle) { debounce(setter(foo, 'The best things in life are worth waiting for.', 1250)); } else { foo('Instant gratification
  • 在React.js中执行反跳(Perform debounce in React.js)
    问题 您如何在React.js中执行反跳? 我想对handleOnChange进行反跳。 我尝试用debounce(this.handleOnChange, 200)但是它不起作用。 function debounce(fn, delay) { var timer = null; return function() { var context = this, args = arguments; clearTimeout(timer); timer = setTimeout(function() { fn.apply(context, args); }, delay); }; } var SearchBox = React.createClass({ render: function() { return <input type="search" name="p" onChange={this.handleOnChange} />; }, handleOnChange: function(event) { // make ajax call } }); 回答1 2019:尝试钩子+承诺消除反弹 这是我如何解决此问题的最新版本。 我会用: 很棒的去抖承诺去抖异步功能使用常量将已去抖动的功能存储到组件中 react-async-hook将结果放入我的组件 这是一些初始接线
  • 回调函数传参与防抖动处理 《一》
    有这么个需求,点击按钮的时候,要做防抖动处理,这个时候我用到了回调函数,且回调函数中需要传递参数 一:首先来讲讲回调函数传递参数吧 方式一:使用一个匿名函数将函数包起来:红色字体,外面的那个是做防抖动处理的,代码会贴在下面,现在重点看红色字体 <Button type="default" size="small" style="margin: 5px" @click="$Debounce((function(){testa('aa')}))">审核通过</Button> 方式二:思路跟方式一差不多,但是这里用箭头函数来处理,好处是不用写得这么麻烦,代码如下 <Button type="default" size="small" style="margin: 5px" @click="$Debounce(()=>{testa('aa')})">审核通过</Button> 方式三:方式二已经相对简洁了,但我还是不满意,不应该写得这么麻烦,方式三的思路是这样的:既然回调函数里面不好传参,那么我就把回调函数中的参数传递到外层的方法中,当要调用回调函数的时候,再把参数放进去回调函数中。 讲起来,看起来都比较费劲,一看代码就明白了 代码中可以看到,我用可变形参来接收回调函数中需要传递的参数,在调用回调函数的时候,将可变形参传递进去 //这个是在debounce.js文件中的代码 let
  • 函数防抖节流原理及封装+闭包+call/apply/bind
    防抖与节流 概述 防抖和节流是针对响应跟不上触发频率这类问题的两种解决方案鼠标移动事件onmousemove, 滚动滚动条事件onscroll,窗口大小改变事件onresize,搜索框智能联想,瞬间的操作都会导致这些事件会被高频触发。如果事件的回调函数较为复杂,就会导致响应跟不上触发,出现页面卡顿,假死现象。而且用户体验差,加载慢,费流量,太多请求增大服务器压力。 对比防抖节流 防抖:如果一直按下键盘,中间的状态都会被忽略,只执行最后一次节流:如果一直按下键盘,每隔指定的时间执行一次防抖:当降频函数被调用时,不立刻去执行处理函数,而是延迟时间t执行节流:一件事如果执行的频率非常快,节流就是把频率降至指定的值防抖:例如搜索框输入,智能联想,依旧可以发多次ajax请求,只不过是频率变慢了节流:提交按钮,点击多次,只执行一次 函数防抖(debounce) 简述:当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=
  • 深入篇 | Lodash 防抖和节流是怎么实现的
    引言前面几节我们学习了节流函数 throttle,防抖函数 debounce,以及各自如何在 React 项目中进行应用,今天这篇文章主要聊聊 Lodash 中防抖和节流函数是如何实现的,并对源码浅析一二。下篇文章会举几个小例子为切入点,换种方式继续解读源码,敬请期待。有什么想法或者意见都可以在评论区留言,欢迎大家拍砖。防抖函数 debounceLodash 中节流函数比较简单,直接调用防抖函数,传入一些配置就摇身一变成了节流函数,所以我们先来看看其中防抖函数是如何实现的,弄懂了防抖,那节流自然就容易理解了。防抖函数的定义和自定义实现我就不再介绍了,之前专门写过一篇文章,戳这里学习进入正文,我们看下 debounce 源码,源码不多,总共 100 多行,为了方便理解就先列出代码结构,然后再从入口函数着手一个一个的介绍。代码结构function debounce(func, wait, options) { // 通过闭包保存一些变量 let lastArgs, // 上一次执行 debounced 的 arguments, // 起一个标记位的作用,用于 trailingEdge 方法中,invokeFunc 后清空 lastThis, // 保存上一次 this maxWait, // 最大等待时间,数据来源于 options,实现节流效果,保证大于一定时间后一定能执行
  • 防抖和节流
    防抖和节流 1 什么是防抖? 防抖是指在某个时间段内,没有再次触发某个函数,才执行该函数。 当函数触发时,相应函数不会立即触发执行,而是会等待一段时间; 当事件被密集触发,函数的触发会被频繁的延迟 只有等待了一段时间也木有事件触发,才会真正的执行响应函数 防抖案例:监听input的输入,通过打印模拟网络请求 <body> <input class="search" type="text"> <script> // 1.获取输入框 var search = document.querySelector(".search"); // 2.监听输入内容,发送ajax请求 // 2.1.定义一个监听函数 var counter = 0; function searchChange() { counter++; console.log("发送"+ counter +"网络请求"); } // 绑定oninput search.oninput = searchChange </script> </body> 实现防抖可以采用两种手段; 第一种可以采用一些第三方库来实现 比如lodash 安装lodash lodash的官方:https://lodash.com/ lodash的安装有很多种方式: 下载lodash,本地引入;通过CDN直接引入;通过包管理工具(npm)管理安装;
  • 如何在带有 Typescript 的 VueJs 手表中使用 Lodash 去抖动(How to use Lodash debounce in VueJs watch with Typescript)
    问题 在 VueJS (Javascript) 中,我可以这样做: import debounce from "lodash/debounce"; ... watch: { variable: debounce(function() { console.log('wow'); }, 500) } 在 VueJS (Typescript) 中,我尝试: npm i lodash-es npm i @types/lodash-es -D 在组件中: import { Component, Vue, Watch } from "vue-property-decorator"; import debounce from "lodash-es/debounce"; ... @Watch("variable") debounce(function() { console.log('wow'); }, 500) 但我收到错误: 'debounce' 缺少返回类型注释,隐含地具有一个 'any' 返回类型。 成员“500”隐式具有“任何”类型。 PS 这工作正常: func = debounce(() => { console.log('wow'); }, 500) 回答1 @Watch("variable") debounce(function() { console.log('wow'); }
  • 函数防抖,函数节流。详解!!!
    这里写目录标题 函数防抖:debounce我们在平时开发的时候,会有很多场景会频繁触发事件,比如说搜索框实时发请求, onmousemove, resize, onscroll等等,有些时候,我们并不能或者不想频繁触发事件, 咋办呢?这时候就应该用到函数防抖和函数节流了! 函数节流 throttle保证一个时间段内只执行一次,函数节流有俩种做法,第一种是立即执行一次再说,第二种是等时间到了再执行第一次 函数防抖:debounce 我们在平时开发的时候,会有很多场景会频繁触发事件,比如说搜索框实时发请求, onmousemove, resize, onscroll等等,有些时候,我们并不能或者不想频繁触发事件, 咋办呢?这时候就应该用到函数防抖和函数节流了! //应用场景,百度搜索框,监控文本框内容变化, 但是他不是时时刻刻监控,我们打完字后会等一下才自动搜索,可以自己取百度搜索体验一下 监控窗口发生变化的函数,如果不用函数防抖, 那么在拖动的过程中会触发很多次,这不是我们想看到了 1.不添加函数防抖的window.onresize函数 当你窗口拖动时,会连续触发很多次,输出很多次aaaa。 window.onresize = function () { console.log("aaaa"); } 2.简单封装过后的函数防抖,运行过后发现并没有什么卵用
  • 开发随笔:在react中使用带参的防抖节流回调
    12. 在react中使用防抖和节流 1. 原理 为什么要使用防抖节流,以及防抖节流的原理可以细看 防抖和节流 2. 在React中使用防抖节流错误的例子 import React from "react"; import { debounce } from "lodash"; export function ErrorInput() { const onChange = e => { console.log(e.target.value); }; return <input onChange={debounce(onChange, 500)} />; } 上述代码看上去没啥问题,但是我们实际在输入框中改变Input的值的时候会出现以下报错 这里存在的问题是,因为event事件是同步的,而通过debounce之后,会将多次的事件合并为一次,进行执行,因此该event性质会被改变不再是同步传过来的变量了,因此会有该警告 3. 解决办法 方法一:添加e.persist()。如果按照提示,在调用的函数中添加e.persist(),确实能够消除该报错,但是接下来的问题是event.target可能会是null,那么如果我们在接下来的业务代码中需要使用到e.target.value就会由问题。因此这个方法不太推荐。 方法二:利用传参的方法来实现。直接上代码 import _ from
  • 将lodash导入angular2 +打字稿应用程序(Importing lodash into angular2 + typescript application)
    问题 我很难尝试导入 lodash 模块。 我已经使用 npm+gulp 设置了我的项目,并且一直在碰壁。 我试过普通的 lodash,也试过 lodash-es。 lodash npm 包:(在包根文件夹中有一个 index.js 文件) import * as _ from 'lodash'; 结果是: error TS2307: Cannot find module 'lodash'. lodash-es npm 包:(在 lodash.js 包根文件夹中有一个默认导出) import * as _ from 'lodash-es/lodash'; 结果是: error TS2307: Cannot find module 'lodash-es'. gulp 任务和 webstorm 都报告了同样的问题。 有趣的事实,这不会返回错误: import 'lodash-es/lodash'; ......但当然没有“_”...... 我的 tsconfig.json 文件: { "compilerOptions": { "target": "es5", "module": "system", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true,
  • _.debounce有什么作用?(What does _.debounce do?)
    问题 我一直在从事的项目使用_.debounce()。 Underscore JS反抖动文档的内容如下: 防抖动_.debounce(function, wait, [immediate]) 创建并返回所传递函数的新反跳版本,该函数会将其执行推迟到自上次调用以来经过了毫秒的等待时间。 显然,这是假设任何想知道debounce()所做的事情的人都已经知道“ debounce”的含义。 反跳实际上是做什么的? 回答1 基本上,它会限制调用,因此,如果在短时间内多次被调用,则只会调用一个实例。 你为什么要使用它? 诸如window.onresize之类的事件连续多次触发。 如果您需要对新头寸进行大量计算,则不希望多次触发计算。 您只想在用户完成调整大小事件后将其触发。 回答2 来自underscore.js的源代码描述: 返回一个函数,只要它继续被调用,就不会被触发。 该函数将在停止调用N毫秒后被调用。 如果通过了“立即”,则在前沿而不是尾随触发功能。 自行编码: _.debounce = function(func, wait, immediate) { var timeout, result; return function() { var context = this, args = arguments; var later = function() { timeout =
  • 打字稿异步/等待不会更新AngularJS视图(Typescript async/await doesnt update AngularJS view)
    问题 我正在使用Typescript 2.1(开发人员版本)将异步/等待转换为ES5。 我注意到,在更改了必须在异步函数中查看的任何属性后,该视图不会使用当前值进行更新,因此每次我必须在函数末尾调用$ scope。$ apply()时。 异步代码示例: async testAsync() { await this.$timeout(2000); this.text = "Changed"; //$scope.$apply(); <-- would like to omit this } 此后,新的text值不会显示在视图中。 有没有解决方法,所以我不必每次都手动调用$ scope。$ apply()? 回答1 这里的答案是正确的,因为AngularJS不知道该方法,因此您需要“告诉” Angular有关已更新的任何值。 我个人将$q用于异步行为,而不是将await用作其“ Angular方式”。 您可以很容易地用$ q包装非Angular方法,即[注意,这是我包装所有Google Maps函数的方式,因为它们都遵循这种传递回调的模式,以通知完成情况] function doAThing() { var defer = $q.defer(); // Note that this method takes a `parameter` and a callback function
  • 在 Angular 中导入和使用 lodash 的正确方法(Correct way of importing and using lodash in Angular)
    问题 我曾经能够通过如下所示的导入语句在 Angular 中使用 lodash 方法: import {debounce as _debounce} from 'lodash'; 使用该语句时,我现在收到以下错误: '"{...}/node_modules/@types/lodash/index"' has no exported member 'debounce'. 唯一可以编译而不会出错的是以下语句: import * as _ from 'lodash'; 在我的代码中,我将_debounce()更改为_.debounce() 。 这是唯一(和/或正确)的方法吗? 有没有办法只导入去抖动,或者由于“摇树”而无关紧要? 我意识到我可以编写自己的去抖动函数,但我主要对“正确”的方法感兴趣。 ps 我尝试过的其他变体(每个变体都有某种与之相关的错误): import {debounce as _debounce } from 'lodash/debounce'; import * as _debounce from 'lodash/debounce'; import debounce = require('lodash/debounce'); 仅供参考......我正在使用以下版本: 角度:2.4.5 打字稿:2.1.5 角cli:1.0.0-beta.26 回答1
  • 休息参数是否允许优化?(Do rest parameters allow for optimization?)
    问题 Bluebird 关于优化杀手的文章中的管理参数部分指出: arguments对象不得在任何地方传递或泄漏。 换句话说,不要执行以下操作: function leaky(){ return arguments; } 但是这样做: function not_leaky(){ var i = arguments.length, args = []; while(i--) args[i] = arguments[i]; return args; } 随着 Rest 参数的引入,传递 rest 参数数组是否仍然会导致优化问题? 据我了解,问题在于我们不能让实际arguments Object 松动。 有限的、已定义的arguments副本是可以的,但不是实际的对象本身。 如果是这样的话,是作为一个确定和优化的复制处理,其余参数arguments以下列方式使用时? function maybe_optimizable(...args){ return args; } 具体来说,我正在尝试基于 David Walsh 的 debounce 函数(基于 Underscore.js')编写一个debounce函数,并且我认为将arguments分配给debounce函数顶部范围内的变量存在问题。 为了纠正这个问题,我写了以下内容: function debounce(func, wait
  • Gulp.js,观看任务在保存文件时运行两次(Gulp.js, watch task runs twice when saving files)
    问题 根据gulpfile.js中的以下代码,每次我保存或更改文件时,任务都会运行两次,而不是一次运行,为什么呢? 我只希望它运行一次。 var gulp = require('gulp'); gulp.task('default', function() { gulp.watch('server/**/*.js', function(){ console.log('This runs twice everytime I change/save a javascript file located at server/**/*.js'); }); }); 我对grunt和名为grunt-contrib-watch的插件也有同样的体验。 回答1 发生问题是因为您的编辑器(在本例中为Coda 2)在保存时两次修改了文件。 由于vim如何在保存时创建缓冲区备份,因此在vim中也会发生相同的问题。 解决vim问题的方法是添加 set nowritebackup 到您的~/.vimrc文件。 这会将默认的保存协议更改为仅对原始文件进行一次编辑。 换句话说,默认的保存协议如下: 将缓冲区写入备份文件删除原始文件将备份重命名为原始文件的名称 添加set nowritebackup只会在保存时替换原始文件。 存在此协议是为了减少保存时发生I / O错误时数据丢失的风险。 回答2
  • 有人可以解释Javascript中的“反跳”功能吗(Can someone explain the “debounce” function in Javascript)
    问题 我对javascript中的“反跳”功能感兴趣,写在这里:http://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. 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 =
  • 使用 Underscore debounce[React] 获取事件对象(Getting the event object with Underscore debounce[React])
    问题 我正在尝试对我设法执行的操作使用去抖动,但是我想将 e 作为参数传递,但它不起作用。 有什么办法可以做到这一点吗? constructor(props, context) { super(props, context); this.testing = _.debounce(this.testing.bind(this), 2000); } @action testing(e) { alert("debounced!!"); //use e.target ... } 如果我拿走 e 它将进入该功能,否则不会。 我应该怎么做才能解决这个问题? 回答1 您可以使用event.persist()将事件传递给debounce方法。 根据 DOCS: 如果您想以asynchronous方式访问事件属性,您应该对事件调用event.persist() ,这将从池中删除合成事件并允许用户代码保留对事件的引用。 所以你可以使用这个事件作为 constructor(props, context) { super(props, context); this.testing = _.debounce(this.testing.bind(this), 2000); } @action testing(e) { alert("debounced!!"); //use e.target ... }
  • 等待再次调用 javascript 函数(Wait before a javascript function can be called again)
    问题 我已经研究了许多不同的解决方案,但都没有奏效。 我知道它与 setTimeout 有关,但我不知道如何正确实现它。 function myfunction() { //the function //wait for 1 second before it can be ran again } 澄清一下:我不想定期调用该函数,我希望能够在再次调用该函数之前强制执行延迟。 回答1 var lastTime = 0; function myFunction() { var now = new Date().getTime(); // Time in milliseconds if (now - lasttime < 1000) { return; } else { lastTime = now; } // rest of function } 回答2 您根本不需要使用 setTimeout。 以下与其他答案类似,但使用闭包来记住函数上次运行的时间,而不是全局变量。 var myFunction = function() { var lastTime = new Date(); return function() { var now = new Date(); if ((now - lastTime) < 1000) return; lastTime = now; /* do
  • 如何使可观察的 debounceTime 有条件(How to make observable debounceTime conditional)
    问题 我对元素输入事件有一个简单的去抖动,如下所示: Observable .fromEvent(this.elInput.nativeElement, 'input') .debounceTime(2000) .subscribe(event => this.onInput(event)); 我想根据事件发出时的值使去抖动有条件,这可能吗? 谢谢 回答1 是的,这是完全可能的。 只需使用debounce运算符而不是debounceTime 。 它传递了一个选择器函数,该函数在调用时接收先前的运算符通知。 在您的示例中: Observable .fromEvent(this.elInput.nativeElement, 'input') .debounce(ev => ev.hasSomeValue ? timer(2000) : EMPTY) .subscribe(event => this.onInput(event)); 选择器函数需要一个ObservableLike并等待它发出,然后再转发收到的最后一个debounce通知。 所有其他通知都被丢弃,就像debounceTime 。 您可以使用EMPTY立即转发通知而无需任何超时(尽管这将是异步的,请参见下文) 从学习-rxjs: 虽然不像 debounceTime 那样广泛使用,但当 debounce 速率可变时
  • jQuery中的反跳功能(Debounce function in jQuery)
    问题 我正在尝试使用Ben Alman的jquery反跳库来反跳按钮的输入。 http://benalman.com/code/projects/jquery-throttle-debounce/examples/debounce/ 目前,这是我拥有的代码。 function foo() { console.log("It works!") }; $(".my-btn").click(function() { $.debounce(250, foo); }); 问题是,当我单击按钮时,该功能永远不会执行。 我不确定是否误解了一些内容,但据我所知,我的代码与示例匹配。 回答1 我遇到了同样的问题。 发生问题是因为debounce函数返回了一个新函数,该函数在任何地方都没有被调用。 要解决此问题,您必须将反跳功能作为参数传递给jquery click事件。 这是您应该拥有的代码。 $(".my-btn").click($.debounce(250, function(e) { console.log("It works!"); }));