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

我还搜索了一个解决方案，并找到一个执行它的插件。很高兴与您分享：）

＆＃13;

/* 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) {
	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);
    }
}

＆＃13;

#tick-arrow {
    position: absolute;
}

＆＃13;

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

＆＃13;

每秒打印数组元素

2 个答案: