毎秒配列要素を印刷する

Question

私はそれがあなたのほとんどにとって簡単だと知っていますが、今は私を悩ませています。私は配列とその要素を毎秒ループし、要素が呼び出される関数を実行しようとしていました。しかし、結果は常にすべての要素を一度に印刷するループです。

これは私のコードのようです。ごめんなさい。

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

Answer 1

あなたは毎秒その機能を実行したいと言っています。その機能はどうなりますか？あなたは全体の配列を実行します。

おそらくこのようなものが必要です。 forループを完全に削除して、反復子（i）をループ外に宣言してください。 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++; 
} 

Answer 2

また、私は、このための解決策を探して、それを実行するためのプラグインを見つけます。 あなたにそれを共有する:)

/* ysm.array.js; Yan Morin <progysm@gmail.com>; 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>