javascript - 设置 onClick 导致无限循环

Question

我使用右上角的挂锁图标锁定了页面的某些部分。这会更新数据库，并且图标从打开的锁更改为关闭的锁。我希望现在使用相同的图标来解锁相同的数据。我想做的是每次单击时将 onclick 函数从 lockRun() 更改为 unlockRun() 。但发生的情况是，不仅设置 onclick，还执行单击，因此它不断从锁定变为解锁，这不是我想要的!执行此循环的代码如下。

function lockRun(runNum) {
  var lockID = 'Lock' + runNum;
  var runID = 'Run' + runNum;
  var runIDCode = document.getElementById(lockID).dataset.runid;
  console.log(runIDCode);
  $.ajax({
    url: '/runs/lock',
    type: 'POST',
    data: {
      runCode: runIDCode
    }
  }).done(function (response) {
    //console.log(siblings[1].dataset.contno);
    var dbResponse = JSON.parse(response);
    document.getElementById(lockID).classList.remove("fa-lock-open");
    document.getElementById(lockID).classList.add("fa-lock");
    document.getElementById(runID).classList.add('locked');
    document.getElementById(lockID).onclick = unlockRun(runNum);
  });
}

function unlockRun(runNum) {
  var lockID = 'Lock' + runNum;
  var runID = 'Run' + runNum;
  var runIDCode = document.getElementById(lockID).dataset.runid;
  console.log(runIDCode);
  $.ajax({
    url: '/runs/unlock',
    type: 'POST',
    data: {
      runCode: runIDCode
    }
  }).done(function (response) {
    //console.log(siblings[1].dataset.contno);
    var dbResponse = JSON.parse(response);
    document.getElementById(lockID).classList.remove("fa-lock");
    document.getElementById(lockID).classList.add("fa-lock-open");
    document.getElementById(runID).classList.remove('locked');
    document.getElementById(lockID).onclick = lockRun(runNum);
  });
}

因此，一旦单击挂锁图标，就会立即执行解锁功能，然后重复执行锁定功能。

Answer 1

您的问题就在这里 -

document.getElementById(lockID).onclick =unlockRun(runNum);

您将 onclick 设置为该函数返回的任何内容，而不是函数本身。通过使用带有 (argument) 的函数，您可以立即调用它，而不是传递它以供稍后调用。

这是解决这个问题的一种方法 - 使用闭包:

document.getElementById(lockID).onclick = function () { 解锁运行(runNum) };

参见Passing a function with parameters as a parameter?有关此内容的更多信息。

编辑:

正如 @get-off-my-lawn 在评论中指出的，同样的策略需要应用于设置 onclick 的两个地方。