javascript - 我无法正确处理 setTimeout

Question

我尝试仅在字段模糊且计时器结束时提交表单。

这就是我的想法:

function adminRefresh() {
    $("input").blur(function() {
        $(this).css('background-color', "pink");
        setTimeout(delayedSubmit, 15000);
    });
};

function delayedSubmit() {
    $.ajax({
        url: $('#refresh').attr("action"),
        type: "POST",
        data: $('#refresh').serialize(),
        dataType: 'js',
        success: function(response) {}
    });
}

这是调用函数时我的 HTML 代码的示例:

<tr>
    <td><p>Téléphone</p></td>
    <td class='float-label'>
        <%= f.input: phone_number, label: false %>
    </td>
</tr>

基本上，我希望在字段模糊后 15 秒触发 delayedSubmit 函数。但是，它一直在提交，但没有执行任何操作。

有什么帮助吗？非常感谢。

Answer 1

问题出在您设置 setTimeout 语句的方式上。

您已在 blur 上添加了 setTimeout，因此每次字段模糊时 setTimeout(delayedSubmit, 15000); 都会被执行， 15 秒后，表单将被提交。

可以通过添加如下条件来解决此问题:

var isHandlerAttached = null;
$("input").blur(function(){
    $(this).css('background-color', 'pink');
    if (isHandlerAttached) {
        clearTimeout(isHandlerAttached);
    }
    isHandlerAttached = setTimeout(delayedSubmit, 15000);
});

这只会让 delayedSubmit 在字段模糊至少 15 秒后执行。

除此之外，您还应该考虑以下几点:

1. 仅执行一次adminRefresh()。如果您多次执行它，则 blur 处理程序将被添加多次，并且也会执行多次，这将多次提交表单。
2. 添加一个条件以在表单提交后停止提交。您可以通过使用另一个变量 isFormSubscribed 并将其初始值设置为 false 来实现此目的。在 delayedSubmit() 函数中检查它，如果为 false，则执行该函数。并在delayedSubmit()函数末尾或ajax成功响应中将其值设置为true，以适合您的方式为准。