JQuery：送信ボタンを押さなくてもデータを送信できますか？

Question

$(function(){ 
    $("input[type=text]").keypress(function(){ 
     $("#loader").load("saveinputtodatabase.php", {...}); 
    }); 
}); 

これは私のコードで正常に動作します。ユーザーが入力に何かを入力するたびに、データベースにデータを保存します。しかし、私はこれがサーバーにとって何の問題もないことを知っています。なぜなら、同じファイルを何度も読み込むことが多いため、必要以上に帯域幅が使用されるからです。

ユーザーがキーを押してから10秒が経過した場合にのみ、「saveinputtodatabase.php」をロードできるようにするにはどうすればよいですか？

Answer 1

これにはsetTimeoutとclearTimeoutを使用できます。

$(function(){ 
    var timeout = 10000; // 10 seconds 
    var tmt = null; 
    $("input[type=text]").keypress(function() { 
    if (tmt) clearTimeout(tmt); 
    tmt = setTimeout(function() { 
     $("#loader").load("saveinputtodatabase.php", {...}); 
    }, timeout); 
    }); 
}); 

Answer 2

$(function(){ 
    $("input[type=text]").keypress(function(){ 
     var t=setTimeout(function(){ 
      $("#loader").load("saveinputtodatabase.php", {...}) 
     },10000); 
    }); 
}); 

Answer 3

var timeout; 
$('input[type=text]').keypress(function() { 
    if(timeout) { 
     clearTimeout(timeout); 
     timeout = null; 
    }  
    timeout = setTimeout(somefunc, 10000) 
}); 
function somefunc() { 
    $("#loader").load("saveinputtodatabase.php", {...}); 
} 

Answer 4

この

$(function(){ 
    $("input[type=text]").keypress(function(){ 
    save();   
}); 
}); 
function save(){ 
setTimeout($("#loader").load("saveinputtodatabase.php", {...}),10000) 
} 

Answer 5

は、これらのunderscore.js機能をチェックしてみてください。

http://documentcloud.github.com/underscore/#throttle

渡された関数の新しい調整済みバージョン を作成して返します。繰り返し呼び出されたときには、多くの場合、待機秒ごとに1回だけ実際には 関数が呼び出されます。あなたが追いつくことができるよりも速く発生するレート制限イベント に役立ちます。

http://documentcloud.github.com/underscore/#debounce

後のミリ秒を待つまで、その実行を延期する渡された関数 の新しいデバウンスバージョンを作成し、返し は、それが呼び出された最後の時間から経過しました。 の動作の実装に役立ちます。これは、入力の到着が停止した後にのみ発生する必要があります。 たとえば、Markdownコメントのプレビューのレンダリング、ウィンドウのサイズ変更が停止した後の のレイアウトの再計算などがあります。

Answer 6

$('textarea').on('keyup', _.throttle(_.debounce(function() { 
$.ajax(...); 
}, 2000), 60000)); 

これは一回毎分以上とすぐに、ユーザは少なくとも2秒間入力して停止したとして、あなたのデータを保存しませんが。チェックアウトアンダースコア.js詳細について