[英]Why isn't setTimeout working in this function?
我创建了一个生成选项卡的函数。 它通过将元素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'); }
实际上,它可以工作,但是我希望元素在触发时淡入,尽管过渡会影响元素上现有的元素,但这种情况不会发生。 我认为这可能是因为显示属性也发生了变化,从而覆盖了淡入的不透明效果,所以我决定添加一个超时效果-但它不起作用。 我添加了一个窗口警报来对其进行测试,由于某种原因它不会触发,这是为什么呢?
谢谢
可能有错误。 在循环内创建延迟函数调用时,必须使用闭包。 所以这是错误的document.getElementById(panel[i]).style.opacity = '1';
调用该函数时, panel[i]
将引用panels
列表的最后一个元素。 为了避免这种行为,请包装对闭包的调用,例如
setTimeout(function (thePanel) { return function(){ // do whatever you need with thePanel } }(panel[i]), 500);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.