Javascript setInterval连续多行

Question

我需要逐个滚动表格中的多行文字。当到达最后一行时，第一行应该再次滚动，依此类推等等（请参阅小提琴以获得更好的下划线）

到目前为止，我已经实现了这个表格（请参阅此JSFiddle），但我遇到了一个相当奇怪的问题：在第一轮＆＃39;一切正常，但是当我到达最后一行，然后设置第一行滚动，这一行滚动两倍的速度。

我可以看到这是因为我从未在初始动作上调用clearInterval，但是当我这样做时，其他所有动作也会停止（参见here）。

如何让第一行以正常速度滚动？

编辑：按要求，相关代码：

＆＃13;

＆＃13;

var arrScrollTexts = Array({
  'text': $('#text1'),
  'marquee': $('#marq1')
}, {
  'text': $('#text2'),
  'marquee': $('#marq2')
}, {
  'text': $('#text3'),
  'marquee': $('#marq3')
});


var speed = 50;
var cntTexts = 0;
var indent = 0;
var movingText;

var marquee = arrScrollTexts[cntTexts].marquee;
var text = arrScrollTexts[cntTexts].text;

setMovement(marquee);

function setMovement(mar) {
  var movement = setInterval(function() {
    mar.scroll()
  }, speed);
  return movement;
}

function unsetMovement(mov) {
  clearInterval(mov);
}

marquee.scroll = function() {
  indent--;

  marquee.css('text-indent', indent);
  // If the end of the Text is showing, set line to normal
  if (indent < -1 * (text.width() - marquee.width())) {
    indent = 0;
    marquee.css('text-indent', indent);
    cntTexts++;

    // If last line is scrolling: Set first line as next line
    if (cntTexts == arrScrollTexts.length) {
      cntTexts = 0;
    }

    // Select next line
    text = arrScrollTexts[cntTexts].text;
    marquee = arrScrollTexts[cntTexts].marquee;

    // unset current movement of line, set next line moving
    unsetMovement(movingText);
    movingText = setMovement(marquee);

  }
}

＆＃13;

table {
  width: 50%;
  table-layout: fixed;
  border-collapse: collapse;
}
td {
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid purple;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table>
  <tr>
    <td id="marq1">
      <span id="text1">
            The Second round this line goes twice as fast. Trollolo...
          </span>
    </td>
  </tr>
  <tr>
    <td id="marq2">
      <span id="text2">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </span>
    </td>
  </tr>
  <tr>
    <td id="marq3">
      <span id="text3">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </span>
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你不需要停下来＆amp;再次开始间隔＆amp;再次。marquee.scroll()已经在每行滚动完成后将缩进重置为0。您只需删除unsetMovement()＆amp;来自setMovement()

的marquee.scroll()

var arrScrollTexts = Array({
  'text': $('#text1'),
  'marquee': $('#marq1')
}, {
  'text': $('#text2'),
  'marquee': $('#marq2')
}, {
  'text': $('#text3'),
  'marquee': $('#marq3')
});


var speed = 50;
var cntTexts = 0;
var indent = 0;
var movingText;
var marquee = arrScrollTexts[cntTexts].marquee;
var text = arrScrollTexts[cntTexts].text;

setMovement(marquee);

function setMovement(mar) {
  var movement = setInterval(function() {
    mar.scroll()
  }, speed);
  return movement;
}
marquee.scroll = function() {
  indent--;
  marquee.css('text-indent', indent);
  // If the end of the Text is showing, set line to normal
  if (indent < -1 * (text.width() - marquee.width())) {
    indent = 0;
    marquee.css('text-indent', indent);
    cntTexts++;

    // If last line is scrolling: Set first line as next line
    if (cntTexts == arrScrollTexts.length) {
      cntTexts = 0;
    }
  // Select next line
    text = arrScrollTexts[cntTexts].text;
    marquee = arrScrollTexts[cntTexts].marquee;
  }
}

table {
  width: 50%;
  table-layout: fixed;
  border-collapse: collapse;
}
td {
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid purple;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table>
  <tr>
    <td id="marq1">
      <span id="text1">
            The Second round this line goes twice as fast. Trollolo...
          </span>
    </td>
  </tr>
  <tr>
    <td id="marq2">
      <span id="text2">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </span>
    </td>
  </tr>
  <tr>
    <td id="marq3">
      <span id="text3">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </span>
    </td>
  </tr>
</table>