javascript - 防止实时表上传的双重事件功能

Question

我有一个具有可内容编辑值的表，当我更改值时，ajax 操作将更新数据库的值。问题是，在警报继续出现后，单击一个框，然后立即单击另一个框，而无法执行任何其他操作。有没有办法阻止其他点击功能一旦启动？

代码JS:

function showEdit(editableObj) {
  $(editableObj).css("background", "#FFF");
}

function saveToDatabase(editableObj, column, id) {
  var isGood = confirm('Are you sure?');
  if (isGood) {

    $(editableObj).css("background", "#FFF url(./img/loaderIcon.gif) no-repeat right");
    $.ajax({
      url: "saveedit.php",
      type: "POST",
      data: 'column=' + column + '&editval=' + editableObj.innerHTML + '&id=' + id,
      success: function(data) {
        $(editableObj).css("background", "#FDFDFD");
      }
    });
    //  }
  } else {
    alert('Abort');
  }
}

PHP 表:

echo '<td contenteditable="true" onBlur="saveToDatabase(this, \'nameDB\', \''.$res2['valuefromDB'].'\')" onClick="showEdit(this);">' .$res2['valuefromDB'] .'</td>';

Answer 1

您可以使用标志来阻止激活:

var saveEnabled = true; // Only let you save when this is true
function saveToDatabase(editableObj, column, id) {
  if (!saveEnabled) return; // If saveEnabled is false do not continue
  saveEnabled = false;
  var isGood = confirm('Are you sure?');
  if (isGood) {
    $(editableObj).css("background", "#FFF url(./img/loaderIcon.gif) no-repeat right");
    $.ajax({
      url: "saveedit.php",
      type: "POST",
      data: 'column=' + column + '&editval=' + editableObj.innerHTML + '&id=' + id,
      complete: function(data) { // Errors should be handled before this
        $(editableObj).css("background", "#FDFDFD");
        saveEnabled = true;
      }
    });
    //  }
  } else {
    alert('Abort');
    saveEnabled = true;
  }
}