在preventDefault（）之后延遲表單提交

Question

我試圖在每個表單元素上附加一個事件偵聽器，然后檢查是否已提交。 我不希望提交表單，而是等待1秒鍾再提交。 提交表單后，我希望它console.log()來自表單的結果。 下面的代碼應該可以，但是不能：

$("form").each(function() {
    $(this).on("submit", function(e) {
        e.preventDefault();
        var form = $(this);
        setTimeout(function() {
            form.submit();
        }, 1000);
        var data = $(this).serialize();
        console.log(data);
    });
});

我遇到的問題是它使事件偵聽器保持啟動狀態，因此它基本上會陷入無限循環，或者不提交表單。 我究竟做錯了什么？

編輯：對於你們所有人都對此表示反對：為什么？ 我知道我不應該在表單提交中引入延遲，但這是針對我自己的項目的，我稍等片刻就可以了。

Answer 1

問題在於form是jQuery對象，因此form.submit()運行jQuery提交處理程序，並導致無限循環。 您要調用瀏覽器的本機提交代碼。 使用以下方法：

var form = $(this).get(0);

這會將form設置為DOM元素而不是jQuery對象，並且form.submit()將提交表單而無需通過jQuery處理程序。

Answer 2

$("form").each(function() {
    $(this).on("submit", function(e) {
        if(!$(this).hasClass("submitted")) {
            e.preventDefault();
            var form = $(this);
            setTimeout(function() {
                form.submit();
            }, 1000);
            var data = $(this).serialize();
            console.log(data);
            $(this).addClass("submitted");
        }
    });
});

如果確實需要，可以嘗試這樣的操作。

Answer 3

     bool someflag=true    
     $("form").each(function() {
        $(this).on("submit", function(e) {
        if (someflag){        
                e.preventDefault();
                someflag=false;
        }
                var form = $(this);
                setTimeout(function() {
                    form.submit();
                }, 1000);
                var data = $(this).serialize();
                console.log(data);
            });
        });

Answer 4

我相信這會起作用。 表單提交延遲一秒鍾。 提交表單后，您將必須刪除超時。

$("form").each(function() {

    $(this).on("submit", function(e) {
        e.preventDefault();
        var form = $(this);
        var data = $(this).serialize();
        setTimeout(function() {
          console.log(data);
          form.submit();
        }, 1000);
    });

});

Answer 5

var submitted = false;
$("form").each(function() {
    $(this).on("submit", function(e) {
        if(!submitted) {
            e.preventDefault();
            setTimeout(() => {
                $(this).submit();
            }, 1000);
            var data = $(this).serialize();
            console.log(data);
            submitted = true;
        }
    });
});

這可以正常工作。 我一直希望有一個更好的解決方案，但如果它能奏效，那就行了。