jQuery循环并追加使浏览器崩溃

Question

因此，基本上，一旦单击特定的图像，我就会尝试显示Bootstrap Modal。 然后，我尝试在段落标签中显示一些文本和图像，每600毫秒更改一次，如下所示：

Playing -> Playing. -> Playing.. -> Playing...

text变为'Playing...' ，它将以'Playing'返回到开头，并一遍又一遍，直到Modal的display类别变为none为止。

我在setTimeOut函数之后调用所有这些方法，因为我需要等待Bootstrap Modal首先加载以针对其类进行测试。

虽然，我的代码每次都会使浏览器崩溃，因此，我无法查看开发人员工具来发现问题。

$(".tutorial").click(function () {
    $('#tutorialModal').modal('show');
    $(this).toggleClass('playingGif'); //display 'playing' background image
    $(this).toggleClass('tutorial'); //turn off regular background image

    setTimeout(function () {
        while ($('#tutorialModal').css('display') == 'block') {
            var text = 'Playing';

            $('p', this)
            .delay(600)
            .queue(function (n) {
                $(this).html(text);
                n();
            });

            if (text == 'Playing...') {
                text = 'Playing';
            } else {
                text += '.';
            }
        }
    }, 500);
});

Answer 1

尝试这样的事情：

var text = 'Playing';
function startPlaying() {

  if($('#tutorialModal').css('display') == 'block') {


    $('p', this).html(text);
    n();

    if (text == 'Playing...') {
      text = 'Playing';
    } else {
      text += '.';
    }
    window.setTimeout(startPlaying, 500);
  }
}
startPlaying();

这样，它每500毫秒运行一次，更新播放中的文本，然后，如果仍然显示该文本，则会在另外500毫秒内使该函数的另一次运行排队。 我没有尝试这段代码，只是为了给您一个总体思路。