点击后Jquery循环插件超时加速？答案

【问题标题】：Jquery cycle plugin timeout speeds up after click?点击后Jquery循环插件超时加速？
【发布时间】：2012-01-12 21:42:44
【问题描述】：

我正在使用循环插件以及其他一些 jquery 脚本，我还使用通过外部导航控制循环插件幻灯片的选项，即 ul#pan_ul 下的 <li> 元素。

一切似乎都正常，我将超时设置为：8000，但是在不同的幻灯片中单击几下后，循环超时频率似乎增加了，并且变得可变。一张幻灯片似乎有 2000 的超时，然后是 5000，然后是 1000。再一次，这仅在单击一些导航 li 后才会发生，它会事先运行得很好。这是我的代码：

function cycleIt(){
$('#showcase').cycle({ 
    fx:     'scrollRight',
    timeout: 8000,
    before:  onBefore,
    pager:  '#pan_ul',
        pagerAnchorBuilder: function(idx, slide) { 
        // return selector string for existing anchor 
        return '#pan_ul li:eq(' + idx + ')'; 
        }
 });
}

function onBefore(){
    var currentPanel = $(this).index();
    var lastPanel = $(this).index()-1;
    if (lastPanel != -1) {
            $("#pan_ul li:eq("+currentPanel+")").css({"background-image":"url(Images/panelslice_ON.jpg)"})
            $("#pan_ul li:eq("+lastPanel+")").css({"background-image":"url(Images/panelslice.jpg)"});
                }
                else {
                $("#pan_ul li:first").css({"background-image":"url(Images/panelslice_ON.jpg)"})
                $("#pan_ul li:last").css({"background-image":"url(Images/panelslice.jpg)"});
                }           
}


$("#pan_ul li").click(function(){
    var oldPanel = $(".case:visible").index();
    var ind = $(this).index('#pan_ul li');

    $("#pan_ul li").css({"background-image":"url(Images/panelslice.jpg)"})
    $("#pan_ul li:eq("+ind+")").css({"background-image":"url(Images/panelslice_ON.jpg)"})
    /*$('#showcase').cycle('stop');
return false;
    $(".case:eq("+oldPanel+")").hide();
    $(".case:eq("+ind+")").show();


*/
})
});

如果您想亲自查看，我已经上传了我正在网上制作的测试网站。动作是每 8 秒一次。为了看到问题，只需像疯子一样在滚动导航的不同项目中单击几秒钟。然后观看幻灯片中的超时变化。

http://almostfamousevents.com/TEST/

【问题讨论】：

你能在 jsFiddle 上做一个演示吗？
错误修复：Jquery 周期版本：2.9999.3 (08-MAR-2012)

标签： jquery jquery-plugins

【解决方案1】：

我尝试在 chrome 中重现，一秒钟超时似乎发生了变化，但随后又恢复正常。所以这让我怀疑问题来源是点击中的一些冒泡事件。如果在某处设置了以下内容，则可以停止事件冒泡和默认行为：

$.click(function(event){
event.preventDefault();
event.stopPropagation() ;
//rest of your code

【讨论】：