Jak wyłączyć obsługę zdarzeń kliknięcia przez określony czas?

Question

Tylko JavaScript, bez jquery.

Kod wygląda tak:

window.onload = addListeners; 
function addListeners(){ 
    for(var i = 0 ; i < document.getElementsByClassName('arrow').length; i++){ 
    if(window.addEventListener){ 
     document.getElementsByClassName('arrow') [i].addEventListener('click', func , false); 

    }else{ 
     document.getElementById('arrow') [i].attachEvent('onclick' , func); 
    } 
} 
} 


function func(){ 
//Takes exactly 5 seconds to execute 
} 

Teraz chcę wyłączyć „kliknięcie” na 5 sekund po włączeniu funkcji "func() jest uruchomiony. A następnie po całkowitym uruchomieniu funkcji "func()" kliknięcie powinno ponownie zostać włączone automatycznie.

Jak zrobić to tylko używając JavaScript?

Answer 1

Aby rozwinąć moje komentarze na Curts answer:

Podczas deklarowania funkcji func można zrobić dwie rzeczy:

function func() { 
    if (!func.isRunning) { 
     func.isRunning = true; 
     /* logic goes here */ 
     func.isRunning = false; 
    } 
} 

Albo można zrobić zamknięcie i przechowywać IsRunning wewnątrz niego:

var func = (function() { 
    var isRunning = false; 
    return function() { 
     if (!isRunning) { 
      isRunning = true; 
      /* logic goes here */ 
      isRunning = false; 
     } 
    }; 
})(); 

Drugi przykład może spowodować, że zmienna prywatna będzie dostępna tylko wewnątrz zamknięcia.

---

Dotyczy to głównie wzorca projektowania, który niektórzy programiści nie lubią zapisywać zmiennych bezpośrednio w funkcjach takich jak w przykładzie pierwszym. Jedyna różnica polega na tym, że jeśli ktoś zdecyduje się ustawić func.isRunning = true, funkcja nie może zostać uruchomiona ponownie i dlatego nie jest resetowana.

Answer 2

Zamiast wyłączać wydarzenie click, sprawdź zmienną, aby zobaczyć, czy aktualnie działa.

var funcRunning = false; 
function func(){ 
    if (funcRunning) return; 
    funcRunning = true; 

    //Function logic here 

    funcRunning = false; 
    return //whatever 
} 

ten sposób Państwa nie zgadywać funkcję zajmie 5 sekund do uruchomienia, funkcja po prostu nie wykonać swoją logikę aż do jego obecnej zakończone jej biegu.

EDIT: W @NULL zasugerował, lepszą metodą byłoby zapisać zmienną logiczną na samej funkcji, aby zapobiec globalnego zanieczyszczenia:

function func(){ 
    if (func.IsRunning) return; 
    func.IsRunning = true; 

    //Function logic here 

    func.IsRunning = false; 
    return //whatever 
} 

Answer 3

Jeśli funkcja jest asynchroniczny (wysyła żądania ajax, o ile zrozumiałem), lepiej utworzyć callback "sukcesu" dla tego żądania i obsłużyć tam flagę funcRunning.

Oto przykład:

var funcRunning = false; 
function func() { 
    if (funcRunning) { 
    return; 
    } 
    funcRunning = true; 
    var xmlhttp = new XmlHttpRequest(); 
    xmlhttp.open('GET', '/xhr/test.html', true); 
    xmlhttp.onreadystatechange = function() { 
    if (xmlhttp.readyState == 4) { 
     if (xmlhttp.status == 200) { 
     // do something. 
     funcRunning = false; 
     } 
    } 
    }; 
} 

PS: Bieżący przykład nie jest najbardziej poprawny w tworzeniu instancji XmlHttpRequest (nie crossbrowser). Jest to pokazane tylko jako przykład.