javascript - 为什么函数执行 1 + n 次，而它应该在单击时执行一次？

Question

我正在像这样添加 eventListener:

var runSingleTest = document.getElementById('runSingleTest');
runSingleTest.addEventListener('click', sendSingeleTestCase);

当用户在我的表单中单击该按钮时，以下代码将执行 1 + n 次，其中 n 是之前单击该按钮的次数。

function sendSingeleTestCase(){
    var frm = $('#scriptCodeForm');
    var btn =  $('#runSingleTest');
    saveScriptToLocalStorage();
    frm.submit(function (ev){
        $.ajax({
            type: frm.attr('method'),
            url: btn.attr('formaction'),
            data: frm.serialize(),
            success: function (data) {
                console.log("Test would run once.");
            }
        });
        ev.preventDefault();
    });    
}

它没有按预期运行(应该只执行一次却执行了很多次)。

你能帮我理解它没有按预期工作的可能原因吗？

谢谢!

Answer 1

您正在连接点击处理程序中的提交处理程序。将它们分开，以便您只注册一次提交处理程序。

例如像这样的东西:

function sendSingeleTestCase(){
    saveScriptToLocalStorage();
}

var frm = $('#scriptCodeForm');
var btn =  $('#runSingleTest');
frm.submit(function (ev){
    $.ajax({
        type: frm.attr('method'),
        url: btn.attr('formaction'),
        data: frm.serialize(),
        success: function (data) {
            console.log("Test would run once.");
        }
    });
    ev.preventDefault();
});    

另请注意:当您使用 jQuery 时，请将您的点击处理程序转换为:

$('#runSingleTest').click(sendSingeleTestCase);

或将处理程序代码放在匿名函数中:

$('#runSingleTest').click(function(){
    saveScriptToLocalStorage();
    // Do other stuff
});