停止閃爍的顯示塊/無JavaScript中的定時器

我似乎無法弄清楚這裏的邏輯。我有一個隱藏的元素，直到鼠標移動（utilBar），我希望它保持顯示即使在計時器結束後如果鼠標仍在移動。很明顯，我想到的是，在鼠標移動時啓動一個計時器並顯示該元素，並且如果在第一個鼠標移動之後還有另一個鼠標移動，則停止計時器並重復啓動它，因此只要鼠標移動，計時器就不會結束。停止閃爍的顯示塊/無JavaScript中的定時器

問題是我的元素在1000毫秒閃爍後閃爍，因爲我移動了鼠標。我想我只是在這裏邏輯絆倒，但我無法弄清楚。

//Separate function to pass in utilBarTimer into the setTimeout 
function timerFunction(utilBarTimer){ 
    self.iframe.addEventListener('mousemove',function(){ 
    clearTimeout(window.utilBarTimer); 
    }); 
    utilBar.style.display = 'none'; 
} 
self.iframe.addEventListener('mousemove',function(){ 
    utilBar.style.display = 'block'; 
    var utilBarTimer = window.setTimeout(function(){ 
    timerFunction(utilBarTimer) 
    },1000); 
});

來源

2011-12-11 Oscar Godson

它看起來像你正在將計時器本身傳遞給timerFunction，那麼爲什麼要在window.utilBarTimer上調用clearTimeout？ – JesseBuesking

不知道我明白嗎？我取消了timerFunction並每次開始一個新的。 window.utilBarTimer === utilBarTimer。如果我刪除「窗口」。（如果這就是你的意思？）那麼同樣的事情發生。 –

他們的方式，你正在做的是創造一個新的EventListener，每次將清除超時鼠標移動。我認爲你正在尋找的邏輯是這樣的：

var utilBar = document.getElementById('utilBar'), 
    utilBarTimer; 

window.addEventListener('mousemove', function() { 
    utilBar.style.display = 'block'; 

    // if we have a timer already running, kill it out 
    if (utilBarTimer) { 
     clearTimeout(utilBarTimer); 
    } 

    // begin a new timer that hides our object after 1000 ms 
    utilBarTimer = window.setTimeout(function() { 
     utilBar.style.display = 'none'; 
    }, 1000); 
});

這裏的行動它的jsfiddle。

來源

2011-12-11 22:26:34 JesseBuesking

Awh，是的。我甚至沒有考慮檢查是否存在utilBarTimer集。謝謝，像魅力一樣工作！ –

停止閃爍的顯示塊/無JavaScript中的定時器

回答

相關問題