Question

我有页面的某些部分正在使用右上角的挂锁图标锁定。这将更新数据库，并且图标从打开锁更改为关闭锁。我希望现在使用相同的图标来解锁相同的数据。我想做的是每次将onclick函数从lockRun（）更改为unlockRun（）。不过，发生的事情不仅是设置onclick，而且还执行了click，因此它只是不断地从锁定变为解锁，这不是我想要的！下面是执行此循环的代码。

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设置为该功能returns而不是该功能本身。通过将函数与(argument)配合使用，您可以立即调用它，而不会将其传递给以后调用。

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

document.getElementById(lockID).onclick = function () { unlockRun(runNum) };

有关这些内容的更多信息，请参见how to configure custom Identity based DB context。

编辑：

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

设置onClick会导致无限循环

1 个答案: