Drucken Array-Element jede Sekunde

-1

Ich weiß, es klingt einfach für die meisten von euch, aber es hat mich seit einer Weile jetzt nervt. Ich habe versucht, ein Array und seine Elemente jede Sekunde durchzuschleifen und eine Funktion auszuführen, wobei das Element aufgerufen wird. Aber das Ergebnis ist immer der Loop-Druck aller Elemente auf einmal.Drucken Array-Element jede Sekunde

So sieht mein Code aus. Entschuldigung, wenn es unordentlich ist.

var ticking = window.setInterval(ticks, 1000); 

function ticks() { 
    var morse = ['.', '-', '-', '-', '-']; 

    for (i = 0; morse.length > i; i++) { 
     if (morse[i] == '.') { 
     tickArrowDegree = 516; 
     $('#tick-arrow').css({'transform': 'rotate(' + tickArrowDegree + 'deg)'}); 

     setTimeout(function reset() { 
     $('#tick-arrow').css({'transform': 'rotate(' + startPoint + 'deg)'}); 
     }, 500); 
     } 
     else { 
     tickArrowDegree = 522; 
     $('#tick-arrow').css({'transform': 'rotate(' + tickArrowDegree + 'deg)'}); 

     setTimeout(function reset() { 
     $('#tick-arrow').css({'transform': 'rotate(' + startPoint + 'deg)'}); 
     }, 500); 
     } 
    } 
}

Quelle

2016-07-01 Vasko

:) „Aber das Ergebnis ist immer die Schleife Druck alle Elemente auf einmal.“ Welches Element druckst du? –

'setTimeout()' stellt eine Funktion in die Warteschlange, die später ausgeführt werden soll. Die aktuelle Ausführung wird nicht angehalten. (So laufen alle Timeouts ab, nachdem die Schleife beendet ist.) Die einfachste Änderung an Ihrem vorhandenen Code wäre, die Verzögerung auf '500 * i' anstatt auf' 500' zu setzen. – nnnnnn

Ich möchte das erste Element drucken, habe eine Pause, dann drucke Sekunde und pausiere es wieder, usw., bis alle Elemente ausgedruckt sind. – Vasko

Nun, ja. Sie sagen, dass Sie diese Funktion jede Sekunde ausführen möchten. Was passiert in dieser Funktion? Sie durchlaufen das gesamte Array.

Sie wollen wahrscheinlich so etwas. Entfernen Sie einfach die for-Schleife und deklarieren Sie Ihren Iterator (i) außerhalb der Schleife. https://jsfiddle.net/t82m8xog/

var ticking = window.setInterval(ticks, 1000); 
var i = 0; 
var startPoint=0; 

function ticks() { 
    var morse = ['.', '-', '-', '-', '-']; 
    if (i >= morse.length) { 
    clearInterval(ticking);  
    return; 
    } 

    if (morse[i] == '.') { 
    tickArrowDegree = 516; 
    $('#tick-arrow').css({ 
     'transform': 'rotate(' + tickArrowDegree + 'deg)' 
    }); 

    setTimeout(function reset() { 
     $('#tick-arrow').css({ 
     'transform': 'rotate(' + startPoint + 'deg)' 
     }); 
    }, 500); 
    } else { 
    tickArrowDegree = 522; 
    $('#tick-arrow').css({ 
     'transform': 'rotate(' + tickArrowDegree + 'deg)' 
    }); 

    setTimeout(function reset() { 
     $('#tick-arrow').css({ 
     'transform': 'rotate(' + startPoint + 'deg)' 
     }); 
    }, 500);  
    } 
    i++; 
}

Quelle

2016-07-01 02:51:52 aquinas

Ich glaube, das soll funktionieren, aber auf meiner Seite druckt es "." und "-" auf einmal die erste Sekunde, dann "-" 2 mal die nächste Sekunde und "-" 2 weitere Male die dritte Sekunde. Es zählt nicht zu 5. Ich denke, es ist etwas an meinem Ende, das einen Konflikt in meinem Code macht. – Vasko

Ja, mein Fehler, ich hatte eine andere doppelte Variable in meinem Code, die ich nicht gesehen habe. deine lösung war die beste und ich wusste auch nichts über clearInterval also danke ^^ – Vasko

Ich suchte auch nach einer Lösung für dieses und ein Plugin, um sie auszuführen zu finden. Froh, es zu teilen Sie

/* ysm.array.js; Yan Morin <[email protected]>; 2014-12-09 */ 
 

 
if (!('ysm' in window)) { 
 
    window.ysm = {}; 
 
} 
 

 
ysm.array = {}; 
 

 
/** 
 
* Run a function for each item inside an array, using a timeout 
 
* @param Array arr 
 
* @param Function callback (parameters are value, index, array) 
 
* @param Number timems (in milliseconds) 
 
* @return undefined 
 
*/ 
 
ysm.array.forEachTime = function(arr, callback, timems) { 
 
    var i = 0; 
 
    (function c() { 
 
     if (i < arr.length) { 
 
      callback(arr[i], i, arr); 
 
      i++; 
 
      setTimeout(c, timems); 
 
     } 
 
    })(); 
 
} 
 

 
/** 
 
* Run a function for each item inside an array, infinitely, using a timeout 
 
* @param Array arr 
 
* @param Function callback (parameters are value, index, array) 
 
* @param Number timems (in milliseconds) 
 
* @return undefined 
 
*/ 
 
ysm.array.forEachTimeLoop = function(arr, callback, timems) { 
 
    var i = 0; 
 
    (function c() { 
 
     if (i < arr.length) { 
 
      callback(arr[i], i, arr); 
 
      i++; 
 
      if (i === arr.length) { 
 
       i = 0; 
 
      } 
 
      setTimeout(c, timems); 
 
     } 
 
    })(); 
 
} 
 
var morse = ['.', '-', '-', '-', '-']; 
 
ysm.array.forEachTime(morse, ticks, 1000) 
 

 
var startPoint = 0; 
 
function ticks(tick) { 
 
\t console.log(tick); 
 
    if (tick == '.') { 
 
     tickArrowDegree = 516; 
 
     $('#tick-arrow').css({ 
 
      'transform': 'rotate(' + tickArrowDegree + 'deg)' 
 
     }); 
 

 
     setTimeout(function reset() { 
 
      $('#tick-arrow').css({ 
 
       'transform': 'rotate(' + startPoint + 'deg)' 
 
      }); 
 
     }, 500); 
 
    } else { 
 
     tickArrowDegree = 522; 
 
     $('#tick-arrow').css({ 
 
      'transform': 'rotate(' + tickArrowDegree + 'deg)' 
 
     }); 
 

 
     setTimeout(function reset() { 
 
      $('#tick-arrow').css({ 
 
       'transform': 'rotate(' + startPoint + 'deg)' 
 
      }); 
 
     }, 500); 
 
    } 
 
}

#tick-arrow { 
 
    position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="tick-arrow" > 
 
    ARROW 
 
</div>

Quelle

2016-07-01 03:11:43

Drucken Array-Element jede Sekunde

Antwort

Verwandte Themen