clear setTimeout function onkeypress

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)