为什么不是't setTimeout在此函数中工作

Why isn't setTimeout working in this function?

本文关键字：函数 工作 setTimeout 为什么不      更新时间：2023-09-26

我创建了一个生成选项卡的函数。它的工作原理是将元素ID作为参数，然后生成一个事件侦听器，该侦听器然后响应任何元素的单击事件。它有点复杂，所以我只发布它：

function toggleTabs() {
  var panel = [], li = [];
  for(var i = 1, j = arguments.length; i <= j; i++) {
    li[i] = document.getElementById(arguments[i - 1]);
    panel[i] = 'panel' + i;
  }  
  document.getElementById('toggle').addEventListener('mouseup', function(event) {
    var target = event.target.id;
    for(var i = 1, j = li.length; i <= j; i++) {
      if(li[i].id === target) {
        document.getElementById(panel[i]).style.display = 'block';
        setTimeout(function() {
          document.getElementById(panel[i]).style.opacity = '1';
          window.alert('fired');
        }, 500);
        li[i].className = 'active';
      } else if(target.substring(0,3) === 'tab'){
        document.getElementById(panel[i]).style.display = 'none';
        document.getElementById(panel[i]).style.opacity = '0';
        li[i].className = null;
      }
    }
  }, false);
}
if(url === '/customers') { toggleTabs('tab-c-featured', 'tab-c-view'); }

事实上，它是有效的，但我希望元素在触发时逐渐消失，尽管元素上存在过渡，但这并没有发生。我想这可能是因为display属性也发生了变化，覆盖了不透明度的淡入效果，所以我决定添加一个超时效果，但它不起作用。我添加了一个窗口警报来测试它，但由于某种原因，它不会着火，为什么会这样？

感谢

可能存在错误。在循环内创建延迟函数调用时，有必要使用闭包。所以这里是错误的document.getElementById(panel[i]).style.opacity = '1';

当调用函数时，panel[i]将引用panels列表的最后一个元素。为了避免这种行为，请将您的呼叫包装为关闭，例如
setTimeout(function (thePanel) { return function(){ // do whatever you need with thePanel } }(panel[i]), 500);

SO 上有关于此问题的更多信息

相关文章：