Come disabilitare un gestore di eventi click per un tempo particolare?

Question

Solo JavaScript, nessun jquery.

Codice va come:

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 
} 

Ora, voglio disabilitare il 'click' per 5 secondi quando il 'func()' la funzione è in esecuzione. E, dopo che il 'func()' è stato completamente eseguito, il clic dovrebbe essere nuovamente abilitato automaticamente.

Come fare solo con JavaScript?

Answer 1

Elaborare i miei commenti su Curts answer:

Quando si dichiara la funzione func si possono fare due cose:

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

Oppure si può fare una chiusura e conservare IsRunning al suo interno:

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

Il secondo esempio può rendere una variabile privata accessibile solo all'interno della chiusura.

---

sua per lo più su un modello di progettazione alcuni sviluppatori non piace per memorizzare le variabili direttamente sulle funzioni come nell'esempio uno. L'unica differenza è che se qualcuno sceglie di impostare func.isRunning = true la funzione non può essere riavviata e quindi non si resetta.

Answer 2

Invece di disabilitare l'evento click, controllare una variabile per vedere se è attualmente in esecuzione.

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

    //Function logic here 

    funcRunning = false; 
    return //whatever 
} 

In questo modo il vostro non indovinare la funzione avrà 5 secondi per l'esecuzione, la funzione semplicemente non eseguire la sua logica fino al suo completamento la sua corsa corrente.

EDIT: Come @NULL ha suggerito, un metodo migliore potrebbe essere quella di memorizzare il variabile booleana sulla funzione stessa per prevenire l'inquinamento globale:

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

    //Function logic here 

    func.IsRunning = false; 
    return //whatever 
} 

Answer 3

Se la funzione è asincrona (invia richiesta AJAX, per quanto ho capito), è meglio creare una callback "riuscita" per quella richiesta e gestire il flag funcRunning lì.

Ecco un esempio:

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; 
     } 
    } 
    }; 
} 

P.S. L'esempio corrente non è il più corretto nella creazione dell'istanza XmlHttpRequest (non crossbrowser). È mostrato solo come un esempio.