Question

我正在编写下面的代码段。没有setTimeOut（），它的工作完美，并在加载（id）函数中显示我的id。但是使用setTimeOut（）这不能正常工作。

var menuLink = document.getElementsByClassName("li_common_class");
        for(var i = 0; i <  5; i++ ) {
            var childElement = menuLink[i];
            childElement.addEventListener('click',setTimeout(function(){
                loaded(childElement.id);
            },100), true);
        }
    function loaded(id){
     alert(id);
    }

Answer 1

传递功能

您应该分配一个事件处理程序，而不是立即调用 setTimeout。

将函数传递给.addEventListener()，并使用const声明变量。

var menuLink = document.getElementsByClassName("li_common_class");

for (var i = 0; i < 5; i++) {
  const childElement = menuLink[i];

  childElement.addEventListener('click', function() {
    setTimeout(function() {
      loaded(childElement.id);
    }, 100)
  }, true);
}

function loaded(id) {
  alert(id);
}

现在将函数作为第二个参数传递给.addEventListener。该函数被指定为子元素的事件处理程序。我还使用childElement声明const，否则您始终会将 last 值分配给该变量，而不是每次循环迭代的相应值。

无需关闭参考

然而，这仍然不是理想的。你根本不需要childElement，因为你已经在处理程序中引用了元素。

var menuLink = document.getElementsByClassName("li_common_class");

for (var i = 0; i < 5; i++) {
  menuLink[i].addEventListener('click', function(event) {
    var targ = event.currentTarget
    setTimeout(function() {
      loaded(targ.id);
    }, 100)
  }, true);
}

function loaded(id) {
  alert(id);
}

现在看到我在处理函数中添加了event参数。这使您可以获取处理程序绑定的元素。

我们本可以使用this代替event.currentTarget，但实际上我们在setTimeout回调中失去了这个值。如果我们将箭头函数传递给setTimeout，则可以访问事件处理程序this。

重用该功能

但由于不再需要将函数与循环的每次迭代相关联，我们实际上可以将函数移出循环，以便我们重用它。

＆＃13;

var menuLink = document.getElementsByClassName("li_common_class");

for (var i = 0; i < menuLink.length; i++) {
  menuLink[i].addEventListener('click', handler, true);
}

function handler(event) {
  var targ = event.currentTarget

  setTimeout(function() {
    loaded(targ.id);
  }, 100)
}

function loaded(id) {
  alert(id);
}

＆＃13;

<ul>
  <li class="li_common_class" id="foo">CLICK ME</li>
  <li class="li_common_class" id="bar">CLICK ME</li>
  <li class="li_common_class" id="baz">CLICK ME</li>
</ul>

＆＃13;

<强> ES6

如果我们要使用ES6，可以大大缩短相同的代码：

const menuLinkOnClick = event => setTimeout(() => alert(event.target.id), 100),
      menuLinks       = document.getElementsByClassName("li_common_class");

for (let menuLink of menuLinks) {
  menuLink.addEventListener('click', menuLinkOnClick);
}

Answer 2

试试这个：

 var menuLink = document.getElementsByClassName("li_common_class");
  for (var i = 0; i < 5; i++) {
      var childElement = menuLink[i];
      (function (ce) {
          ce.addEventListener('click', function () {

              setTimeout(function () {
                  loaded(ce.id);
              }, 100);

          }, true);
      })(childElement);

  }
  function loaded(id) {
      alert(id);
  }

Answer 3

试试这个：

var menuLink = document.getElementsByClassName("li_common_class");
for(i = 0; i <  5; i++) {
  var childElement = menuLink[i];
  childElement.addEventListener('click', function(){setTimeout(function(){loaded(childElement.id)},100)}, true);
}
function loaded(id){
  alert(id);
}

你在addEventListener（）中有一个函数（setTimeout）而没有把它放在＆＃34;＆＃34;或函数（）{}。你需要在其中一个中除外，如果你希望它通过将functionName放在没有引号或者（）的情况下调用一个没有参数的函数。

希望这有效。

Jquery setTimeout在循环中出现问题而无法正常工作

3 个答案: