时间戳

首页 > 解决方案 > 去抖动功能不适用于输入事件

javascript - 去抖动功能不适用于输入事件

问题描述

我从 David Walsh 博客中获取了 debounce 函数实现。这是它的正文：

function debounce(func, wait, immediate) {
    var timeout;

    return function executedFunction() {
        var context = this;
        var 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);
    };
}

现在我在 html 输入元素中使用这个 debounce 函数，如下所示：

 <input type="text" id="conversation_filter_recent_messages" oninput="debounce(Conversation.recentMessagesFilter,1000)" class="form-control" placeholder="Filter Conversations">

但是当我在那个 HTML 输入元素上按下键时，什么也没有发生。应用断点表明代码永远不会返回名为 executeFunction 的函数。

PS：Conversation.recentMessagesFilter 是我的函数，应该在 1 秒后运行，并在其他文件中定义。

标签： javascripthtmltypescript

解决方案

tkasul 是对的，您应该使用 debounce 一次来创建 debounced 函数并将其添加到输入中。

但是，要使您的代码正常工作，您可以这样做debounce(Conversation.recentMessagesFilter.bind(this),1000)()

所以

 <input type="text" id="conversation_filter_recent_messages" oninput="debounce(Conversation.recentMessagesFilter.bind(this),1000)()" class="form-control" placeholder="Filter Conversations">

绑定是为了this表示recentMessagesFilter 中的输入字段，但是，您可以将其值传递给函数，如下所示：

debounce(Conversation.recentMessagesFilter,1000)(this.value)

推荐阅读