javascript - 如何让一段 JavaScript 代码运行一段时间？

Question

如何运行以下代码的 document.getElementById("myLinkID").onclick = ''; 部分 10 秒？ Javascript 运行一个持续 10 秒的 CSS 动画，我不希望代码在动画完成之前再次运行。任何帮助将不胜感激。

function myFuction() {

  var myVar = document.getElementById('myDivID');

  if (myVar.style.display === 'none') {
    myVar.style.display = 'block';
    document.getElementById('myLinkID').onclick = '';
  }

  else {
    myVar.style.display = 'none';
  }
}

我尝试了以下方法，但它只是卡住了。

function myFunction() {

  var myVar = document.getElementById('myDivID');
  var myVar2 = true;

  while (myVar2 ) {
    document.getElementById('myLinkID').onclick = '';
  }

  setTimeout(function myFunction() {
    myVar2 = false;
  }, 10000);

  if (myVar.style.display === 'none') {
    myVar.style.display = 'block';

  } else {
    myVar.style.display = 'none';
  }
}

更新已修复:

function myFuction() {

  var myVar = document.getElementById('myDivID');

  setTimeout(function() {
    myVar.style.display = 'none';
    document.getElementById('myLinkID').onclick = myFunction;
  }, 10000);

  if (myVar.style.display === 'none') {
    myVar.style.display = 'block';
    document.getElementById('myLinkID').onclick = '';
  }

  else {
    myVar.style.display = 'none';
  }
}

Answer 1

无需循环运行 document.getElementById("myLinkID").onclick = '';。将 onclick 设置为空字符串后，它不会执行任何操作，直到您再次更改它。因此，运行该语句一次，然后设置 10 秒的超时，以便在动画完成后恢复 onclick 处理程序。