Question

我创建了一个新闻源。馈电每2秒切换一次。您也可以手动左/右切换，或从底部的方块中单击面板。使用jQuery UI Slide关闭幻灯片之间的切换。

现在，如果你在幻灯片的中间，然后点击左/右/方块，那么另一张幻灯片就会出现在现有的静止幻灯片的顶部，整个系统都搞砸了。

如果幻灯片/开关已在进行中，如何防止发生其他操作？

这是我的代码：

$(document).ready(function(){
    newsfeedTimer = setInterval(newsfeed, displayDuration);

    // Manual change of feed (LEFT)
    $('#newsfeeds_wrapper > .left').click(function(event){
        event.stopPropagation();
        feedLeft();
        clearInterval(newsfeedTimer);   
        newsfeedTimer = setInterval(newsfeed, displayDuration);
    });
    // Very similar code for feed right
    // Ignore the other method of switching (if it works for above, I can implement it for this one)

});

function newsfeed() {
   feedRight();
}
// Feed to the Right
// jump is used to jump multiple newsfeed instead of one at a time
function feedRight(jump)
{
    jump = typeof jump !== 'undefined' ? jump : 1;
    var current = $('.newsfeed:first');
    var next    = $('.newsfeed:nth(' + jump + ')');
    current.hide('slide',{duration: transitionDuration}, function(){
    // Append as many needed
    for( var i = 0; i < jump; i++ ) {
        $('.newsfeed:first').appendTo('#newsfeeds');
    }
    next.show('slide',{direction : 'right' , duration: transitionDuration});    
}

我不想stop()动画！如果有动画发生，我想禁用更改幻灯片!!

Answer 1

没有看到代码的全部广度，我在这里拍摄自己。但这是我要采取的方向。你也可以有两个函数，一个是绑定，另一个是unbind。启动动画时，解除左/右控制的绑定。停止后，你绑定。或者，设置一个全局变量... ala。

var config = {'inProgress': false};
$('#newsfeeds_wrapper > .left').click(function(event){
    if(!config.inProgress){
      event.stopPropagation();
      feedLeft();
      clearInterval(newsfeedTimer);   
      newsfeedTimer = setInterval(newsfeed, displayDuration);
   }
});

在动画功能中。看起来像剪切/粘贴时，一些代码丢失了，所以让我们假设一些动画。

当您输入动画功能时，请设置config.inProgress = true;

function feedRight(jump)
{
  config.inProgress = true;
  // removed your code, but just using for simplicity sake
  // added a callback 
    next.show('slide',{direction : 'right' , duration: transitionDuration},
      function() {
       // Animation complete. Set inProgress to false
       config.inProgress = false;
      });
    )
}

jQuery等待一个动作完成不同的功能

1 个答案: