Question

我目前正在开发一款浏览器游戏，并遇到了一些问题。我在bootstrap模式中加入了一个bootstrap轮播。

从那里，我在每张幻灯片上读取一个名为data-interval的变量，以使用pause命令获得自定义间隔。（也可以在stackoverflow上找到）

显示我的文字时，几乎播放了一个音频文件。

除了自定义间隔代码之外，它几乎可以正常工作。在我看来，它增加了剩余的秒数。因此，幻灯片的打开时间越来越长。

最后一个问题是，当模态/轮播关闭时，音频文件会在一段时间后重新启动，我猜测轮播仍然在运行，即使它没有显示在屏幕上。

所以......煮熟了： 1. setTimeout（幻灯片之间的时间）搞砸了。 2.音频/轮播在关闭后继续运行。

有问题的代码：

$(function () {
    var t;

    /* Starting the timer, for slider interval */
    /* Getting desired interval from 'data-interval' */
    var start = $('#myCarousel').find('.active').attr('data-interval');
    t = setTimeout("$('#myCarousel').carousel({interval: 1000});", start - 1000);

    /* Getting Total Number of slides */
    var totalItems = $('.item').length;
    var currentIndex = $('div.active').index() + 1;
    $('#carIndex').html(currentIndex + " / " + totalItems + " / 13000 / 20th_century.wav");

    /* Setting the standard slide interval */
    $('#myCarousel').carousel({
        interval: start
    });

    /* Show modal with slide */
    $('.modal').modal('show');

    /* Play first audio, on first slide */
    var audio = document.createElement('audio');
    audio.src = 'http://s2k.chronoslegacy.com/lyd/20th_century.wav';
    audio.play();

    /* Carousel Starting! */
    $('#myCarousel').on('slid.bs.carousel', function (e) {

        /* Clear current setTimeout() */
        clearTimeout(t);
        /* Getting desired interval */
        var duration = $(this).find('.active').attr('data-interval');

        $('#myCarousel').carousel('pause');
        /* Setting new slide interval */
        t = setTimeout("$('#myCarousel').carousel();", duration - 1000);

        /* Getting current slide number */
        currentIndex = $('div.active').index() + 1;

        /* Selecting audio file depending on slide number */
        switch (currentIndex) {
            case 1:
                sound_file = '20th_century';
                /*playSound(this, sound_file);*/
                break;
            case 2:
                sound_file = '2048';
                break;
            case 3:
                sound_file = '2057';
                /* playSound(this, sound_file); */
                break;
            case 4:
                sound_file = '21th_century';
                /* playSound(this, sound_file); */
                break;
            case 5:
                sound_file = '2109';
                /* playSound(this, sound_file); */
                break;
            case 6:
                sound_file = '2109_2502';
                /* playSound(this, sound_file); */
                break;
            default:
                sound_file = 'none';
                break;
        }

        /* Debug readout! */
        $('#carIndex').html(currentIndex + " / " + totalItems + " / " + duration + " / " + sound_file);

        audio.src = 'http://s2k.chronoslegacy.com/lyd/' + sound_file + '.wav';
        audio.play();

        /* If slide has reached it's end, wait for desired interval, and close it */
        if ($('.carousel-inner .item:last').hasClass('active')) {
            $('#myCarousel').carousel('pause');
            setTimeout(function () {
                $('#myModal').modal('hide');
                $('.carousel').each(function () {
                    $(this).carousel({
                        interval: false
                    });
                });
            }, duration);
        }

        /* Making the carousel slide */
        if ($('.carousel-inner .item:first').hasClass('active')) {
            $('#myCarousel').carousel('cycle');
        }
    });
});

JS / jQuery hiccup with bootstrap carousel / setTimeout

0 个答案: