[英]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.