如何在输入端输入后延迟AJAX请求

Question

我对jQuery仍然非常陌生，我正在使用ajax重定向到一个不同的php文件，该文件通过POST将信息放入数据库表。问题是，如果用户正在向字段中输入某项内容，那么它将在每个按键上进行更新。这个条目实际上在html表中，所以我不希望在完成时按下按钮。我不想相信一个点击出去或鼠标离开，因为如果用户输入什么东西，并从他的办公桌打电话，这可能是几个小时后，他回来，并点击出去，以发送的信息。

我的问题是:我如何才能改变我的jQuery以更好地工作，而不是在每次击键时连接到数据库。

我想也许把点击和计时器结合起来会是一个很好的选择，但是我不知道我该怎么做？这样，用户就可以立即点击另一个<td>并继续工作，但是如果他们碰巧站起来离开了他们的电脑，在没有打字的5秒之后，数据库上的信息就会被更新。下面是我使用的当前jQuery：

            $('td').on('input',function() {
            $.ajax({
                method: "POST",
                url: "updatedatabase.php",
                data: { 
                    content: $(this).text(), 
                    date: $(this).siblings().first().text(),
                    prod: $('tr:first-child th:nth-child(' + ($(this).index() + 1) + ')').text(),
                    old: old
                }
            })
                .done(function( msg ) {
                alert( msg );
            });

回溯到这段代码，任何td都是可点击的，因为任何东西都可以在表上修改。当单击<td>时，添加内容可编辑，允许修改<td>。

Answer 1

我经常使用下面这样的东西

var saveTimeout = false;
$('input').on('input', function() {
    if(saveTimeout) clearTimeout(saveTimeout);
    saveTimeout = setTimeout(function() {
        //Do Ajax call here
    }, 500);
});

这将检查是否存在当前超时运行，如果是，它将取消它，这意味着ajax调用不会发生。如果它们没有在500‘t内触发input事件，它将发送ajax请求。

希望这是有意义的

Answer 2

您可以使用下划线库并查找脱去函数。此函数将在等待定义的毫秒后推迟其执行，因为自上次调用它以来。

$('input').on('keypress', _.debounce(function() {
    alert('Fires after typing end with 500ms delay');
}, 500));

小提琴

AJAX示例

$('input').on('keypress', _.debounce(function() {
    $.ajax({
        method: "POST",
        url: "updatedatabase.php",
    }).done(function( msg ) {
        alert( msg );
    });
}, 500));