如何完全停止jQuery循环函数的运行(不是暂停/恢复)

How to completely stop jQuery cycle function from running (not pause / resume)

本文关键字:暂停 恢复 运行 何完全 jQuery 函数 循环      更新时间:2023-09-26

我在响应式移动设计中使用jQuery循环时遇到了一个问题。

使用CSS我可以让它在页面加载时正确显示,但是一旦循环加载,它就不再具有响应性,因为所有东西都有固定的宽度。所以当用户从竖屏模式切换到横屏模式时,循环不会调整大小。

(我知道这在调整大小时触发了一百万次,这不是最好的方法-它只是为了测试)。

目前我正在使用这个测试:

window.onresize = function (event) {
    jQuery('#slideshow').cycle('pause');
    jQuery('#slideshow').cycle({
        fx: 'scrollHorz',
        timeOut: '4000'
    });
    

我想做的是杀死幻灯片并重新加载它,以便循环内部函数+ CSS将占新的屏幕大小。(我知道window.onorientationchange -所以再一次这只是为了测试)。

我要么想知道如何完全停止幻灯片的运行,这样我就可以重新启动它,或者得到一个更好的方法的建议。

它可能没有多大帮助,但这里是一个JS提琴http://jsfiddle.net/yhNgh/

你应该使用destroy:

$('#slideshow').cycle('destroy'); 

顺便说一句,你应该使用timeout来禁用resize方法:

http://jsfiddle.net/yhNgh/1/

jQuery(document).ready(function () {
    jQuery('#slideshow').cycle({
        fx: 'scrollHorz',
        timeOut: '4000'
    });
    var resizeTimeout;
    window.onresize = function (event) {
        clearTimeout(resizeTimeout);
        resizeTimeout = setTimeout(function () {
            jQuery('#slideshow').cycle('destroy');
            jQuery('#slideshow').cycle({
                fx: 'scrollHorz',
                timeOut: '4000'
            });
        }, 50);
    };
});

我重读了你的帖子,试试这个jQuery -如何等待'end'& # 39;调整# 39;事件,然后才执行操作?

 var rtime = new Date(1, 1, 2000, 12,00,00);
 var timeout = false;
 var delta = 200;
 $(window).resize(function() {
    rtime = new Date();
    if (timeout === false) {
        timeout = true;
        setTimeout(resizeend, delta);
    }
});
function resizeend() {
    if (new Date() - rtime < delta) {
        setTimeout(resizeend, delta);
    } else {
        timeout = false;
        alert('Done resizing');
    }               
}

也是另一个很好的链接(来自上面的stackoverflow线程)http://forum.jquery.com/topic/the-resizeend-event