JQueryでキーを押す間のアクションを遅らせるにはどうすればよいですか?例えば;
私はこのようなものを持っています
if($(this).val().length > 1){
$.post("stuff.php", {nStr: "" + $(this).val() + ""}, function(data){
if(data.length > 0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}else{
$('#suggestions').hide();
}
});
}
ユーザーが継続的に入力する場合、データを投稿しないようにしたい。では、どうすれば0.5秒の遅延を与えることができますか?
JQueryのデータ機能を使用して、次のようにこれを行うことができます。
$('#mySearch').keyup(function() {
clearTimeout($.data(this, 'timer'));
var wait = setTimeout(search, 500);
$(this).data('timer', wait);
});
function search() {
$.post("stuff.php", {nStr: "" + $('#mySearch').val() + ""}, function(data){
if(data.length > 0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}else{
$('#suggestions').hide();
}
});
}
ここでの主な利点は、至る所にグローバル変数がないことです。必要に応じて、例をできるだけクリーンにしようとして、これをsetTimeoutの無名関数でラップできます。
あなたがする必要があるのは、ユーザーがキーを押すとリセットされるタイムアウトで関数をラップすることです:
var ref;
var myfunc = function(){
ref = null;
//your code goes here
};
var wrapper = function(){
window.clearTimeout(ref);
ref = window.setTimeout(myfunc, 500);
}
次に、キーイベントで「ラッパー」を呼び出すだけです。
これを処理するためのNiceプラグインがあります。 jQueryスロットル/デバウンス
ニックの答えは完璧ですが、最初のイベントをすぐに処理することが重要な場合は、次のことができると思います。
$(selector).keyup(function(e){ //or another event
if($(this).val().length > 1){
if !($.data(this, 'bouncing-locked')) {
$.data(this, 'bouncing-locked', true)
$.post("stuff.php", {nStr: "" + $(this).val() + ""}, function(data){
if(data.length > 0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}else{
$('#suggestions').hide();
}
});
self = this
setTimeout(function() {
$.data(self, 'bouncing-locked', false);
//in case the last event matters, be sure not to miss it
$(this).trigger("keyup"); // call again the source event
}, 500)
}
}
});
私はそれを次のような関数でラップします:
var needsDelay = false;
function getSuggestions(var search)
{
if(!needsDelay)
{
needsDelay = true;
setTimeout("needsDelay = false", 500);
if($(this).val().length > 1){
$.post("stuff.php", {nStr: "" + search + ""}, function(data){
if(data.length > 0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}else{
$('#suggestions').hide();
}
});
}
}
}
そうすれば、これに何度pingしても、500ミリ秒ごとを超えて検索することはありません。