Question

我有一些使用AJAX的文本框，会处理用户输入的内容。问题是，键入后发生的进程是一个非常负载的进程。无论如何，我可以让事件等待500毫秒左右才会再次处理事件？因此，我要输入a，然后输入bsdke后200ms。该活动仅会处理a。请说我在输入asdf后输入a 600毫秒。然后该事件将触发并处理absdkeasdf，因为它在最后一个进程后已经过了500毫秒。

或者甚至，是否有一种方法可以让事件在被触发的上一个事件完成之前不被触发？

有可能吗？肯定在最后坚持超时功能是不行的，对吧？

 $('#selection1-3-4-a, #selection1-3-4-b, #selection1-3-4-c, #selection1-3-4-d, #selection1-3-4-e, #selection1-3-4-f').on('input', function (e) {
    var url = "/ex.php";
    $.ajax ({
    //......

 });

Answer 1

调整事件很困难，因此用户可以获得良好的体验，并且在使用自动完成功能时不会向服务器发送请求。

我会这样做：该事件将等待X毫秒来自行运行。如果再次触发事件，并且未经过X毫秒，则将延迟重置为0.

让我们变得很酷并制作一个通用函数来执行此操作（无法测试它，它可能会被破坏）：

function delayedEvent(eventHandler, delay) {
    var lastTimeout = null;

    return function () {
        var that = this,
            args= Array.prototype.slice.call(arguments).sort();

        if (lastTimeout !== null)
            window.clearTimeout(lastTimeout);

        lastTimeout = window.setTimeout(function () {
            eventHandler.apply(that, args);
        }, delay);
    };
}

$('... selector ...').on('event', delayedEvent(function () { ... your code ... }, 500));

Answer 2

使用setTimeout：

 var timer;
 $('#selection1-3-4-a, #selection1-3-4-b, #selection1-3-4-c, #selection1-3-4-d, #selection1-3-4-e, #selection1-3-4-f').on('input', function (e) {
    var url = "/ex.php";
    clearTimeout(timer);
    timer = setTimeout(function() {
        $.ajax ({
        //......
    }, 500);
 });

Answer 3

我建议使用锁。

// global lock
var locked = false;
$('#selection1-3-4-a, #selection1-3-4-b, #selection1-3-4-c, #selection1-3-4-d, #selection1-3-4-e, #selection1-3-4-f').change(function (e) 
{
    if(!locked)
    {
        locked = true;
        $.ajax(......)  // ajax here

        setTimeout(function(){locked = false;}, 500);
    }

});

如何让jQuery在事件发生后等待

3 个答案: