代码之家 › 专栏 › 技术社区 › AKAust

设置onclick会导致无限循环

javascript

AKAust · 技术社区 · 6 年前

我在页面的某些部分使用右上角的挂锁图标锁定。这将更新数据库,并且图标从打开的锁更改为关闭的锁。我希望现在使用相同的图标来解锁相同的数据。我要做的是每次单击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);
  });
}

因此,一旦挂锁图标被点击,它将立即执行解锁功能,然后重复执行锁定功能。