Cómo crear un semáforo entre los elementos HTML cargados async

Question

Tengo una página HTML, un elemento que aparece varias veces y que ejecuta el mismo JS. El problema es que quiero que haga una función específica solo si fue la primera en ejecutarla (sus hermanos nunca la ejecutaron, AÚN).

Necesito un semáforo para sincronizarlos. No puedo saber cómo declarar una variable y hacer un semáforo de esta manera en JS.

Answer 1

Hay muchos enfoques.

Debe poner una marca en algún lugar. En ausencia de cualquier otra cosa, puede ponerlo en window, pero use un nombre que no sea probable que entre en conflicto con cualquier otra cosa.

A continuación, el código JavaScript es bastante sencillo:

if (!window.myUniqueNameFlag) { 
    window.myUniqueNameFlag = true; 
    // Do your processing 
} 

Pero, de nuevo, poner las cosas en window no es ideal si se puede evitar, aunque es muy práctica común. (Cualquier función o variable que declare en alcance global es una propiedad de window).

Si su función ya está declarada en alcance global (y por lo tanto ya ocupa un símbolo), puede hacerlo para evitar crear un segundo símbolo. En lugar de:

function foo() { 
    // ...your processing... 
} 

Haga lo siguiente:

var foo = (function() { 
    var flag = flase; 

    function foo() { 
     if (!flag) { 
      flag = true; 
      // ...your processing... 
     } 
    } 

    return foo; 
})(); 

Eso se ve muy complicado, pero en realidad no es: Definimos una función anónima, dentro del cual se define una variable y una función anidada, entonces volvemos al referencia de función anidada y asígnela a la variable foo externa. Puede llamar al foo y obtendrá la función anidada. La función anidada tiene una referencia duradera en la variable flag porque es closure over the variable, pero nadie más puede verla. Es completamente privado.

Una tercera opción es usar una bandera en el propio objeto de la función:

function foo() { 
    if (!foo.flag) { 
     foo.flag = true; 
     // ...do your processing... 
    } 
} 

funciones son sólo objetos con la capacidad de ser llamados, por lo que puede añadir propiedades a ellos.