超時設置爲事件監聽功能

我有一個事件監聽器超時設置爲事件監聽功能

elem.addEventListener('evt', fooFn(){alert("OK")});

我想有此事件偵聽器的超時。所以我們假設，如果它在3秒內沒有收到任何名爲'evt'的事件，我想要通知它超時。

我試圖與setTimeout功能，但到目前爲止，我不管理的addEventListener回調函數（fooFn）的內部變量傳遞給setTimeout之一。

關於我如何製作它的任何想法？

來源

2017-04-24 luthien

你可以嘗試更清楚地重寫你的要求是什麼？該事件是否會觸發超時或事件是否取消超時或兩者？ – Touffy

var evtFired = false; 
setTimeout(function() { 
    if (!evtFired) { 
     // show notification that evt has not been fired 
    } 
}, 3000); 

function fooFn() { 
    evtFired = true; 
    alert('OK'); 
} 

elem.addEventListener('evt', fooFn);

也許這將工作，只是放在外部範圍

來源

2017-04-24 09:12:46

謝謝，這工作得很好！ – luthien

「內部變量」我認爲這應該工作。

function addTimeoutEvent(elem){ 
    var timeout = setTimeout(function(){ 
     alert('the time is out'); 
     elem.removeEventListener('evt',foo) 
    },3000); 
    elem.addEventListener('evt', foo); 
    function foo(){ 
    if(timeout) 
     clearTimeout(timeout); 
    alert("OK") 
    } 
}

來源

2017-04-24 09:17:50

嘗試以下解決方案：

let btn = document.getElementById('btn'); 
 

 
let timeOut = setTimeout(() => { 
 
    btn.removeEventListener('click', handler); 
 
    alert('no event on btn'); 
 
}, 3000); 
 

 
let handler = x => { 
 
    clearTimeout(timeOut); 
 
    alert('click on btn') 
 
}; 
 

 
btn.addEventListener('click', handler);

<button id="btn">click me within 3 sec</button>

來源

2017-04-24 09:19:17 GibboK

超時設置爲事件監聽功能

回答

相關問題