时间戳

首页 > 解决方案 > 我的 javascript 正在多次调用应该只被调用一次的函数

javascript - 我的 javascript 正在多次调用应该只被调用一次的函数

问题描述

我正在使用 asp.net 和 javascript 为表格创建一个 CRUD 网页。当我第一次运行代码时，一切正常——我可以更新/插入/删除，页面会用新结果刷新。如果我进行第二次更新/插入/删除，由于某种原因，正在调用获取更新数据的调用，并且结果显示两次。如果我第三次执行代码，它会调用刷新数据函数三次。等等等等。恐怕我对 javascript 和 ajax 的了解还不够，无法理解我做错了什么导致这种情况，并希望更有经验的人能够发现它。

下面是我的 javascript..getData() 是从我的数据库中检索数据的函数。在这个函数中是插入/更新/删除的 onclick 事件。它们每个都调用相同的函数 - altRec()，并传入操作（更新/插入/删除）。altRec 依次格式化并显示模式，并更改提交按钮以调用更新/插入/删除功能。成功时，选择的任何函数都会调用 get_data() 函数来获取更新的数据集。

var pageID = 45;
var det;

$(document).ready(function () {
console.log('docReady');

getData();
});

function getData() {
console.log('getData');

$('#actScores').empty();

$.ajax({
    type: "POST",
    contentType: "application/json; charset=UTF-8",
    url: "WebServices/ccr.asmx/getUserACTScores",
    data: JSON.stringify({ pageID: pageID }),
    dataType: "json",
    success: function (results) {
        var lastPersonID = '';
        det = results.d;

        for (var i = 0; i < det.length; i++) {
            if (det[i].personID != lastPersonID) {
                var stud = "<tr>"
                    + "<td><button type='button' class='btn btn-sm btn-success' onclick=\"altRec('" + 
i + "', 'insert');\">Insert</button></td>"
                    + "<td>" + det[i].lastName + ", " + det[i].firstName + "</td>"
                    + "<td class='text-center'>" + det[i].SSID + "</td>"
                    + "<td></td>"
                    + "<td></td>"
                    + "<td></td>"
                    + "<td></td>"
                    + "<td></td>"
                    + "<td></td>"
                    + "</tr>"

                $("#actScores").append(stud);
            }

            var rec = "<tr>"
                + "<td><button type='button' class='btn btn-sm btn-warning' onclick=\"altRec('" + i + 
"', 'modify');\">Update</button>&nbsp;<button type='button' class='btn btn-sm btn-danger' 
onclick=\"altRec('" + i + "', 'delete');\">Delete</button></td>"
                + "<td></td>"
                + "<td></td>"
                + "<td class='text-center'>" + det[i].actDate + "</td>"
                + "<td class='text-center'>" + det[i].actComposite + "</td>"
                + "<td class='text-center'>" + det[i].actEnglish + "</td>"
                + "<td class='text-center'>" + det[i].actMath + "</td>"
                + "<td class='text-center'>" + det[i].actReading + "</td>"
                + "<td class='text-center'>" + det[i].actScience + "</td>"
                + "</tr>"

            $("#actScores").append(rec);
            lastPersonID = det[i].personID;
        }
    }
})
}

function searchTableColumn() {
console.log('searchTableColumn');

var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("actScores");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[1];
    if (td) {
        txtValue = td.textContent || td.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
        } else {
            tr[i].style.display = "none";
        }
    }
}
}

function altRec(idx, action) {
console.log('altRec');

if (action == 'insert') {
    $('#modalTitle').html("Insert New Record");
    $('#modalSSID').html(det[idx].SSID);
    $('#modalStudent').html(det[idx].firstName + " " + det[idx].lastName);
    $('#modelDate').html();
    $('#btnAction').html("Insert");
    $('#btnAction').removeClass("btn-warning");
    $('#btnAction').removeClass("btn-danger");
    $('#btnAction').addClass("btn-success");
    document.getElementById("btnAction").removeEventListener("click", modRec, true);
    document.getElementById("btnAction").removeEventListener("click", delRec, true);
    document.getElementById("btnAction").addEventListener("click", function () {
        saveRec();
    });
} else if (action == 'delete') {
    $('#modalTitle').html("DELETE RECORD");
    $('#modalSSID').html(det[idx].SSID);
    $('#modalStudent').html(det[idx].firstName + " " + det[idx].lastName);
    $('#modalInputDate').val(formatDate(det[idx].actDate)); 
    $('#modalInputComposite').val(det[idx].actComposite);
    $('#modalInputEnglish').val(det[idx].actEnglish);
    $('#modalInputMath').val(det[idx].actMath);
    $('#modalInputReading').val(det[idx].actReading);
    $('#modalInputScience').val(det[idx].actScience);
    $('#btnAction').html("DELETE");
    $('#btnAction').removeClass("btn-warning");
    $('#btnAction').removeClass("btn-success");
    $('#btnAction').addClass("btn-danger");
    document.getElementById("btnAction").removeEventListener("click", modRec, true);
    document.getElementById("btnAction").removeEventListener("click", saveRec, true);
    document.getElementById("btnAction").addEventListener("click", function () {
        delRec();
    });
} else if (action == 'modify') {
    $('#modalTitle').html("Update Record");
    $('#modalSSID').html(det[idx].SSID);
    $('#modalStudent').html(det[idx].firstName + " " + det[idx].lastName);
    $('#modalInputDate').val(formatDate(det[idx].actDate));
    $('#modalInputComposite').val(det[idx].actComposite);
    $('#modalInputEnglish').val(det[idx].actEnglish);
    $('#modalInputMath').val(det[idx].actMath);
    $('#modalInputReading').val(det[idx].actReading);
    $('#modalInputScience').val(det[idx].actScience);
    $('#btnAction').html("Update");
    $('#btnAction').removeClass("btn-success");
    $('#btnAction').removeClass("btn-danger");
    $('#btnAction').addClass("btn-warning");
    document.getElementById("btnAction").removeEventListener("click", saveRec, true);
    document.getElementById("btnAction").removeEventListener("click", delRec, true);
    document.getElementById("btnAction").addEventListener("click", function () {
        modRec();
    });
}

$('#modalPersonID').html(det[idx].personID);
$('#modalRec').modal('show');
}

function saveRec() {
console.log('saveRec');

var parmSave = {
    personID: $('#modalPersonID').html(),
    testDate: $('#modalInputDate').val(),
    compScore: $('#modalInputComposite').val(),
    englishScore: $('#modalInputEnglish').val(),
    mathScore: $('#modalInputMath').val(),
    readingScore: $('#modalInputReading').val(),
    scienceScore: $('#modalInputScience').val()
};

$.ajax({
    type: "POST",
    contentType: "application/json; charset=UTF-8",
    url: "WebServices/ccr.asmx/insertUserACTScore",
    data: JSON.stringify(parmSave),
    dataType: "json",
    success: function (results) {
        var retVal = results; 

        getData();

        $('#modalRec').modal('hide');
    }
})
}

function delRec() {
console.log('delRec');

var parmSave = {
    personID: $('#modalPersonID').html(),
    testDate: $('#modalInputDate').val(),
};

$.ajax({
    type: "POST",
    contentType: "application/json; charset=UTF-8",
    url: "WebServices/ccr.asmx/deleteUserACTScore",
    data: JSON.stringify(parmSave),
    dataType: "json",
    success: function (results) {
        var retVal = results;

        getData();

        $('#modalRec').modal('hide');
    }
})
}

function modRec() {
console.log('modRec');

var parmSave = {
    personID: $('#modalPersonID').html(),
    testDate: $('#modalInputDate').val(),
    compScore: $('#modalInputComposite').val(),
    englishScore: $('#modalInputEnglish').val(),
    mathScore: $('#modalInputMath').val(),
    readingScore: $('#modalInputReading').val(),
    scienceScore: $('#modalInputScience').val()
};

$.ajax({
    type: "POST",
    contentType: "application/json; charset=UTF-8",
    url: "WebServices/ccr.asmx/updateUserACTScore",
    data: JSON.stringify(parmSave),
    dataType: "json",
    success: function (results) {
        var retVal = results;

        getData();

        $('#modalRec').modal('hide');
    }
})
}

function formatDate(date) {
console.log('formatDate');

var d = new Date(date),
    month = '' + (d.getMonth() + 1),
    day = '' + d.getDate(),
    year = d.getFullYear();

if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;

return [year, month, day].join('-');
}

最后，这是控制台日志的屏幕截图，因此您可以看到调用流：

在此处输入图像描述

标签： javascriptajax

解决方案

我想到了！！问题出在我的函数 altRec() 中，特别是我试图从其他按钮调用中删除 EventListener 函数的地方，我猜我的语法不正确，因为它们没有被删除，并且每次调用该函数时它只是添加另一个事件监听器——就像@epascarello 在评论中指出的那样。经过一番研究，我发现您现在可以添加一个 EventListener 并传递一个“once: true”参数，它会运行一次并自行删除。我删除了手动删除事件的代码行并添加了该选项，现在一切正常：

        document.getElementById("btnAction").addEventListener("click", function () {
        saveRec();
    }, { once: true });

推荐阅读