jquery - JQuery：无需按下提交按钮即可提交数据？

Question

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

这适用于我的代码。每次用户在输入中键入内容时，它都会将数据保存在数据库中。但我知道这对服务器不公平，因为它会多次加载许多相同的文件，从而导致带宽的使用超出应有的范围。

只有在用户按下一个键后 10 秒后，我才能让它加载“saveinputtodatabase.php”？

Answer 1

你可以使用setTimeoutand 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

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

Answer 3

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

Answer 4

试试这个

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

Answer 5

查看这些 un​​derscore.js 函数：

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

创建并返回传递函数的新的、受限制的版本，当重复调用时，每等待毫秒最多只会实际调用一次原始函数。对于发生得比您跟得上快的限速事件很有用。

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

创建并返回传递函数的一个新的去抖动版本，该版本将推迟其执行，直到自上次调用以来等待毫秒过去后。对于实现仅在输入停止到达后才应发生的行为很有用。例如：渲染 Markdown 注释的预览，在窗口停止调整大小后重新计算布局等等。

Answer 6

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

这将在用户停止输入至少 2 秒后立即保存您的数据，但每分钟不超过一次。结帐 underscore.js 了解更多信息