ajax/jquery POST 请求的不必要重复

Question

我遇到了一个问题，由于我无法理解的原因，我的发帖请求被重复。我正在使用 jQuery POST 请求将表单提交到 php 脚本以将其插入 SQL 数据库。

它只在某些情况下发生，而且并非始终如一。 9/10 次按预期工作，但有时 ajax 调用重复 2 或 3 次。

enter image description here

重复代码块：

函数 submitLog(){

let log = document.getElementById('logContent').value;
let project = document.getElementById('logger_active_project').innerHTML;
let category = document.getElementById('categorySelect').value;
let projectID = document.getElementById('logger_active_project_id').value;
let submit = document.getElementById('submit');
submit.disabled = true;

console.log('starting ajax post request');

$.post('./includes/logger/scripts/add_log.php', {
    log:log,
    project:project,
    category:category,
    project_id:projectID

}, function(data, status){
    document.getElementById('logContent').value= "";
    submit.disabled = false;
    console.log('ajax callback fired.' + data);
    
})

} 编辑：

似乎只有在与以下功能一起使用时才会发生：

函数 submitLogByEntering(){ let log = document.getElementById('logContent');

log.addEventListener("keyup", function(event) {
    // Number 13 is the "Enter" key on the keyboard
    if (event.keyCode === 13) {
      // Cancel the default action, if needed
      event.preventDefault();
      submitLog();
    }
  });
}

当使用按钮复制问题时，我无法让它重复。

提前非常感谢您提供的任何提示，让我找到正确的方向来解决这个热点问题！

Answer 1

这很可能取决于submitLog() 的侦听器。

检查您没有使用会触发多重触发的侦听器。

如果检查太多，只需在submitLog() 之外设置一个测试变量，请将其设置为 true 并测试是否为 true，然后触发 ajax。然后在您的发布请求后将其设置为 false 。这将阻止重复的按钮按下等发生或侦听器中发生任何有趣的事情。

如果您需要重新触发函数，请在变量上设置超时（或在 ajax 完成后设置）以将其重置为 true。

示例：

    var test = true;
    
    function submitLog() {
    
        if (test) {
    
            let log = document.getElementById('logContent').value;
            let project = document.getElementById('logger_active_project').innerHTML;
            let category = document.getElementById('categorySelect').value;
            let projectID = document.getElementById('logger_active_project_id').value;
            let submit = document.getElementById('submit');
            submit.disabled = true;
    
            console.log('starting ajax post request');
    
            $.post('./includes/logger/scripts/add_log.php', {
                log: log,
                project: project,
                category: category,
                project_id: projectID
    
            }, function (data, status) {
                document.getElementById('logContent').value = "";
                submit.disabled = false;
                console.log('ajax callback fired.' + data);
    
            });
    
            test = false;
            setTimeout(function () {
                test = true;
            }, 5000);
        }
    }