Question

我有以下问题，

我的Javascript文件中有这段代码，

    termChange(evt) {
        this.rows = [];
        this.searchTerm = evt.target.value;
        this.getCases();
    }

这将清除搜索发生后返回的行，通过事件发生获取搜索词，然后调用getCases。

此Code块调用另一个异步函数getCases，该函数从我们的服务器获取响应并将结果返回。 html具有onChange = {termChange}。但是，这就是问题所在。每次键入时都会调用它，导致搜索时触发8次。这将导致不必要的搜索结果，并且有时会重复。我需要找出一种在用户完成输入后调用此事件的方法。我已经尝试过setTimeouts，甚至使用了防抖功能。但是，我都无法上班来解决问题。任何帮助都将是巨大的。谢谢！

它必须在用户完成输入而没有任何动作或按钮按下时自动搜索。

    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);
        };
    }

这是我编写的去抖动功能。但是，当我尝试按照

的方式进行操作时

    handleTermChange = this.debounce(this.termChange(), 1000, false);

它抛出一个错误，它找不到未定义的目标。因此，它无法通过事件，因此我无法解决这个问题并使它起作用，因此出现了反跳问题。

Answer 1

尝试在每次用户键入时使用模糊事件而不是调用事件。

Answer 2

去抖动是100％的解决方法-它准确地描述了您要执行的操作。也许您需要更长的计时器？还是反跳功能出问题了？

我在我维护的网站上使用250毫秒计时器-但是，如果API的速度较慢或要重写主要页面，则可能要放大。

还要检查以确保输入实际上已更改...例如存储上一次搜索到的字词，如果新输入=旧输入，则在搜索功能中中止

Answer 3

使用onkeyup事件。

HTML：

<input type="text" onkeyup="termChange(event)">

JS：

var timeout = null;
function termChange(evt) {
    clearTimeout(timeout);
    timeout = setTimeout(function () {
          //Your code
    }, 500);

}

用户输入完毕后，调用搜索功能

3 个答案: