Question

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

所以这就是我提出的：

list

这是我的HTML代码的例子，当调用该函数时：

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) {}
    });
}

基本上，我希望在字段模糊后15秒触发<tr> <td><p>Téléphone</p></td> <td class='float-label'> <%= f.input: phone_number, label: false %> </td> </tr>函数。但是，它一直没有做任何事情而继续提交。

有任何帮助吗？非常感谢。

Answer 1

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

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

这可以通过添加如下条件来修复：

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

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

除此之外，您还应该考虑更多的事情：

仅执行一次adminRefresh()。如果您不止一次执行它，那么blur处理程序将被多次添加，并且将多次执行，这将多次提交表单。
添加条件以在提交表单后停止提交表单。您可以使用另一个变量isFormSubmitted并将其初始值设置为false来执行此操作。在delayedSubmit()函数内检查它是否为false，然后执行该函数。并在true函数结束时或在ajax的成功响应中将其值设置为delayedSubmit()，以适合您为准。

Answer 2

这样的东西？

//made delay 2 seconds so you dont have to wait 20 to test it
var delayDuration = 2000; //in milliseconds

var trigger = document.getElementById('trigger');
trigger.addEventListener('blur', function() {
  setTimeout(function() {
    console.log('blurred');
    //send request here
  }, delayDuration);
});

<input id="trigger" type="text" value="Blur for delay trigger" />

我无法正确处理setTimeout

2 个答案: