Question

我有一个搜索框，当用户输入时会将搜索查询实时记录到文本文件中。正如你可以想象的那样，如果有人拼错了一个单词，这可能会导致很多条目。

我想在按键之间延迟1秒的发布请求，如果用户在1秒内再次开始输入以清除超时，则重新开始。

searchBox.keyup(function (e) {

    var logTimer = setTimeout(function () {
        searchQuery = searchBox.val();
        $.post("/submit/search/", { query: searchQuery });
    }, 1000);

    logTimer();
    clearTimeout(logTimer);

});

Answer 1

searchBox.keyup(function (e) {
    // Use _logTimer to prevent if we crashed somthing that exist before.
    // If previous exist, clear it.
    if (this._logTimer!= null) {
       clearTimeout(this._logTimer);
    }

    // Get the timeout id
    this._logTimer = setTimeout(function () {
        searchQuery = searchBox.val();
        $.post("/submit/search/", { query: searchQuery });
        // remember to clear current timeout here.
        this._logTimer = null;
    }.bind(this), 1000);
});

根据您的评论，它可以包装到充当经理的函数中，创建一个示例来演示：

var delayManager = function(cb) {
  var timeout = null;
  
  // Create a function to decide whether to call th cb or not.
  return function(time) {
    time = (time == null) ? -1 : time;
    if (timeout !== null) {
      clearTimeout(timeout);
      timeout = null;
    }
    
    // If called without time, directly call cb
    if (time < 0) {
      cb();
    } else {
      timeout = setTimeout(function() {
      cb();
        timeout = null;
      }, time);
    }
  };
};

// Create a function controller for it.
var delayFunc = delayManager(function() {
    alert("!!!");
});

$("#delay").click(function() {
    delayFunc(2000);
});

$("#now").click(function() {
    delayFunc();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="delay">Delay</div>
<div id="now">Now</div>

在更复杂的情况下，经理需要接受thisArg以使execution context符合用户的期望，但我认为这足以说明如何实现它。

Answer 2

function myFunction() {
    myVar = setTimeout(function(){ alert("Hello"); }, 3000);
}

function myStopFunction() {
    clearTimeout(myVar);
}

在您的情况下，您可以执行类似

的操作

searchBox.keyup(function (e) {
  if (this.logTimer != undefined) {
    clearTimeout(logTimer);
  }

  this.logTimer = setTimeout(function () {
      searchQuery = searchBox.val();
      $.post("/submit/search/", { query: searchQuery });
  }, 1000);

  logTimer();

});

Answer 3

您可以使用一个小的闭包技巧来保持超时延迟自包含并使用生成的函数进行控制

function waitFromLastInvoke(callback, minwait) {
    var i;
    return function (stop) {
        clearTimeout(i);
        if (!stop)
            i = setTimeout(callback, minwait);
    };
}

var command = waitFromLastInvoke(function () {
        searchQuery = searchBox.val();
        $.post("/submit/search/", { query: searchQuery });
    }, 1e3);

searchBox.keypress(function (e) {
    command();
});

这也可以让你通过运行command(true)

取消整个事情

清除setTimeout函数onkeypress

3 个答案: