Question

我正在使用craftyslide jquery插件http://projects.craftedpixelz.co.uk/craftyslide/。此插件用于构建幻灯片。我的网站使用ajax加载内容。在我/＃home我有两张幻灯片/图片。

我得到的问题是这个插件正在使用setInterval（）函数。

// Auto mode
function auto() {
    setInterval(function () { 
    $slides.filter(":first-child").fadeOut(options.fadetime).next("li").fadeIn(options.fadetime).end().appendTo("#slideshow ul");

                $slides.each(function () {
                    if ($slides.is(":visible")) {
                        $(".caption").css("bottom", "-37px");
                        $(this).find(".caption").delay(300).animate({
                            bottom: 0
                        }, 300);
                    }
                });

            }, options.delay);
}

当我在/＃home中加载内容时，一切正常。但是，如果我通过像/＃offers这样的ajax调用加载另一个页面，之后我回到/＃主页，转换开始失败。我得到的不是两个图像，似乎它检测到4.如果我再次执行相同的过程，它将显示6.

正如我所说，我认为这是因为setInterval函数。它仍在执行前一个被调用的+新的setInterval。当我加载另一个页面时，有没有办法删除该setInterval（）？

提前致谢！

其他信息： 由于内容是使用Ajax加载的，因此我在加载内容之前使用模板加载页眉，页脚等。该模板在HEAD中加载了这样的库：

<head>
<title>TITLE</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="fragment" content="!"/>
<script type="text/javascript" src="/js/ext.js"></script>
<script type="text/javascript" src="/js/craftyslide.js"></script>
</head>

当我执行ajax调用以加载#home时，我正在使用一些javascript检索HTML文档。该javascript位于HTML代码的末尾。

<div id="slideshow">
    <ul>
        <li style="width:100%;">
            <img src="bg.jpg" height="400"/>
        </li >

        <li style="width:100%;">
            <img src="kk2_bg_optimized.jpg" height="400"/>
        </li>                         
    </ul>
</div>

<script type="text/javascript"> 
    $(document).ready(function(){ 
        // Load slide 
        $("#slideshow").craftyslide({
            'width': "100%", 
            'height': 400, 
            'pagination': false, 
            'fadetime': 500, 
            'delay': 3500
        });
});
</script>

Answer 1

使用clearInterval（）取消正在进行的间隔

请参阅此链接以供参考

Stop setInterval call in JavaScript

Answer 2

在我看来，您将其作为单页网站运行？如果这是真的，并且如果您的AJAX请求正在返回HTML和JavaScript，那么每次返回主页时，您都会继续复合JavaScript。基本上每次返回主页时，幻灯片的另一个实例正在启动。

CraftySlide插件不会将setInterval()分配给变量，因此您无法使用clearInterval()来阻止它。一旦通过它的API启动幻灯片，它也不提供停止幻灯片的方法。所以我要考虑的是使用全局变量来跟踪CraftySlide是否已经启动。

<div id="slideshow">
    <ul>
        <li style="width:100%;">
            <img src="bg.jpg" height="400"/>
        </li >

        <li style="width:100%;">
            <img src="kk2_bg_optimized.jpg" height="400"/>
        </li>                         
    </ul> 
</div>

<script type="text/javascript"> 
    $(document).ready(function(){ 
        if(typeof(window.slideshowEnabled) == 'undefined' || window.slideshowEnabled == false){
            window.slideshowEnabled = true;

            // Load slideshow
            $("#slideshow").craftyslide({
                'width': "100%", 
                'height': 400, 
                'pagination': false, 
                'fadetime': 500, 
                'delay': 3500
            });
        } 
    }); 
</script>

JQuery + setInterval + Ajax调用

2 个答案: