Javascript setInterval 连续多行

Question

我需要在表格中逐行滚动多行文本。当到达最后一行时，第一行应该再次滚动，依此类推(请参阅 Fiddle 以更好地理解)

到目前为止，我已经实现了该表(请参阅此 JSFiddle )，但我遇到了一个相当奇怪的问题:在第一个“回合”中，一切都工作正常，但是当我到达最后一行时，然后设置第一行滚动，这个滚动速度是原来的两倍。

我可以看到这是因为我从未在初始运动中调用 clearInterval ，但是当我这样做时，所有其他运动也会停止(请参阅 here )。

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

编辑:根据要求，相关代码:

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

  }
}

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>

Answer 1

您不需要一次又一次地停止和开始间隔。每行滚动完成后，marquee.scroll() 已经将缩进重置为 0。您只需从 marquee.scroll()

中删除 unsetMovement() 和 setMovement()

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>