Soy nuevo en JS.
Tengo 2 tarjetas como la de abajo,
<div class = "card" id ="c1"> <div class = "content"> </div> </div> <div class = "card" id ="c2"> <div class = "content"> </div> </div> El content div en la tarjeta 1 debe mostrar el valor dinámico como Date.now() y el content en card2 debe mostrar el valor estático.
JS:
function cardData(card) { myCard(card); } function allCardData() { var cards = document.getElementsByClassName("card"); Array.prototype.forEach.call(cards, (card) => { cardData(card); }); } function mockData(card) { var setInt; function caseOne(card, callBackOne) { callBackOne(card); } function caseTwo(card, callBackTwo) { callBackTwo(card); } // SetInterval function function callBackOne(card) { setInt = setInterval(function () { var currentDate = Date.now(); var val = String(currentDate).substr(8, 2); }, 1000); } //clearInterval function callBackTwo(card) { clearInterval(setInt); } switch(card) { case "c1": return { target: card, value: caseOne(card, callBackOne) } case "c2": return { target: card, value: caseTwo(card, callBackTwo) } } } function Callback(value, callback) { callback(value); } function myCard(card) { Callback(mockData(card), function (data) { console.log(data); var target = document.getElementById(data.target); var content = target.getElementsByClassName('content')[0]; content.innerHTML = data.value; }); } //Onload function window.onload = function () { allCardData(); }; Necesito datos dinámicos cada 2S en card1 y static data Which clears the dynamic value en card2.
Pero no está funcionando.
Dado que la función de devolución de llamada espera return , cuando paso la función mockData a la devolución de llamada. No está funcionando como se esperaba.
¿Podría alguien ayudarme to start the dynamic data in card1 and clear the data in card2 ?
Muchas gracias.
Esto es lo que hace el código:
allCardData() para window.onloadallCardData() llama a cardData() para cada tarjeta encontrada con la identificación de la tarjetacardData() llama a myCard() en un paso intermediomyCard() hace que Callback llame a mockData() para la tarjetamockData() llama a caseOne() para la tarjeta c1 y caseTwo() para la tarjeta c2caseOne() establece un intervalo de 2 segundoscaseTwo() cancela el intervalo No hay tiempo entre llamar a caseOne() y caseTwo() . Se llaman uno después del otro sin tiempo entre ellos. Esto significa que el temporizador se cancela inmediatamente después de inicializarse. No hay tiempo para que el temporizador de 2 segundos haga nada.
Solución sugerida para cambiar caseTwo() para borrar solo el temporizador después de que haya pasado una determinada condición. De lo contrario, el intervalo nunca comenzará.
Es posible que desee buscar en Google sobre async/await , es posible que deba cambiar su código en otras partes:
async function caseTwo(card) { // asynchronously wait, stopping this function until the value is known var value = await getValueTwoFromSomewhere(); clearInterval(setInt); return value; } De lo contrario, el código tendría que ser reescrito a algo diferente.
Tal vez quiera repensar su solución y publicarla nuevamente como otra pregunta.