Question

所以基本上，我试图在点击特定图像后显示Bootstrap模态。然后我尝试在段落标记中显示一些文本和图像，这些文本和图像将每600毫秒更改一次，如下所示：

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

text成为'Playing...'后，它将以'Playing'的形式返回到开头，并一遍又一遍，直到模态的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毫秒中排队另一个函数运行。我没有尝试过这段代码，只是为了给你一个大致的想法。

jQuery循环并追加崩溃浏览器

1 个答案: