更轻的javascript for循环

时间:2017-04-04 11:44:34

标签: javascript jquery performance

我构建了这个简单的交互式场景。现在一切似乎都运行良好,除了开始for循环时如下所示。我该怎么做才能固定剧本?

此处为完整代码http://codepen.io/Angussimons/pen/oZmNer

提前致谢

for (let i = 0; i < manNumber; i++) {

  // Definisco quale strada
  if (i < (manNumber * leftStreet)) {
    street[i] = document.getElementById('path-2');

  } else {
    street[i] = document.getElementById('path-1');
  }

  // genero una velocità per ognuno
  _speed[i] = Math.floor((Math.random() * 400) + 1);
  _speed[i] = (_speed[i]/1000);

  let shiftTop = -1.5;

  // genero una posizione su ognuno
  let manPosition = shiftTop + Math.floor((Math.random() * 1000) - 500)/1000;

  // vario la durata dei gesti
  var _duration = Math.floor((Math.random() * 1000) + 500);

  mansHead.push( new mojs.Shape({
    parent:           '.omini',
    className:        'omino man-head-'+i,
    shape:            'circle',
    radius:           8,
    fill:             manColor,
    top:              manPosition+'%',
    left:             0,
    x:                {0 : 5},
    y:                10,
    easing:           'linear.none',
    duration:         _duration,
  }).then({
    x:                {5 : 0},
  }));
  mansBody.push(new mojs.Shape({
    parent:           '.man-head-'+i,
    className:        'man-body-'+i,
    shape:            'line',
    fill:             'none',
    stroke:           manColor,
    radius:           10,
    strokeWidth:      13,
    strokeLinecap:    'round',
    angle:            {85 : 95},
    x:                {5 : -2},
    y:                30,
    easing:           'linear.none',
    duration:         _duration,
  }).then({
    angle:            {95 : 85},
    x:                {[-2] : 5},
    y:                30,
  }));
  mansArmL.push(new mojs.Shape({
    parent:           '.man-body-'+i,
    className:        'man-arm-'+i,
    shape:            'line',
    fill:             'none',
    stroke:           manColor,
    radius:           10,
    strokeWidth:      6,
    strokeLinecap:    'round',
    angle:            {45 : -45},
    x:                -5,
    y:                {8 : -8},
    duration:         _duration,
  }).then({
    angle:            {[-45] : 45},
    y:                {[-8] : 8},
  }));
  mansArmR.push(new mojs.Shape({
    parent:           '.man-body-'+i,
    className:        'man-arm-'+i,
    shape:            'line',
    fill:             'none',
    stroke:           manColor,
    radius:           10,
    strokeWidth:      6,
    strokeLinecap:    'round',
    angle:            {[-45] : 45},
    x:                -5,
    y:                {[-8] : 8},
    duration:         _duration,
  }).then({
    angle:            {45 : -45},
    y:                {8 : -8},
  }));
  mansLegL.push(new mojs.Shape({
    parent:           '.man-body-'+i,
    className:        'man-leg-'+i,
    shape:            'line',
    fill:             'none',
    stroke:           manColor,
    radius:           12,
    strokeWidth:      7,
    strokeLinecap:    'round',
    angle:            {20 : -20},
    x:                22,
    y:                {8 : -8},
    duration:         _duration,
  }).then({
    angle:            {[-20] : 20},
    x:                22,
    y:                {[-8] : 8},
  }));
  mansLegR.push(new mojs.Shape({
    parent:           '.man-body-'+i,
    className:        'man-leg-'+i,
    shape:            'line',
    fill:             'none',
    stroke:           manColor,
    radius:           12,
    strokeWidth:      7,
    strokeLinecap:    'round',
    angle:            {[-20] : 20},
    x:                22,
    y:                {[-8] : 8},
    duration:         _duration,
  }).then({
    angle:            {20 : -20},
    x:                22,
    y:                {8 : -8},
  }));
}

0 个答案:

没有答案