Question

我试图弄清楚为什么我的函数在几次循环后被破坏的问题。

当我运行我的网页时工作正常，但是当我在浏览器中打开另一个选项卡并让该功能运行并让它执行几个循环然后返回到该网页时，该功能几次刷新并且在淡入淡出之后背景颜色开始闪烁但它设置为2000ms ..任何想法修复？

我尝试这样做：清除间隔并在每次循环后再次运行函数但它做同样的事情。

以下是一个示例：enter link here

打开链接，然后让功能完全加载
打开另一个标签
让函数循环几次（设置为5秒）
回到功能

$(document).ready(function () {
  var mixit = $('#Container').mixItUp({
    load: {
      sort: 'random'
    },
    layout: {
      containerClass: 'list',
      display: 'block'
    }
  });

  function loop() {
    var arr = [];
    i = 0;
    $('.mix').each(function(){
      arr[i++] = $(this).data('myorder');
    });
    mixit.mixItUp('sort', 'random');

    mixit.on('mixEnd', function(e, state){
      var arr2 = [];
    i2 = 0;
    $('.mix').each(function(){
      arr2[i2++] = $(this).data('myorder');
    });
    for(i=0; i<i2; i++){
      for(j=0; j<i2; j++){
        if(arr[i]==arr2[j]){
          if(i<j){
            $('.mix').eq(j).css("background-color", "white");
          }
          if(i>j){
            $('.mix').eq(j).bgColorFade({
    time: 2000
});
          }
        }
      }
    }
    });
  };

  var looper = setInterval(loop, 5000);
});

$.fn.bgColorFade = function(mixcolor) {
    // starting color, ending color, duration in ms
    var options = $.extend({
      start: 'green',
        end: 'white',
      time: 2000
    }, mixcolor || {});
    $(this).css({
        backgroundColor: options.start
    }).animate({
        backgroundColor: options.end
    }, options.time);
    return this;
};

Answer 1

有动画选项queue（默认值：true），表示是否将动画放在效果队列中。要立即开始动画，应将其设置为false。定时器并不完美（特别是在切换标签期间）。这里颜色动画不需要效果队列。它应该立即开始。禁用队列（queue: false）会修复动画：

$(this).css({
    backgroundColor: options.start
}).animate({
    backgroundColor: options.end
}, {
    duration: options.time,
    queue: false
});

动画中断的主要原因是mixEnd事件处理程序的渐进式注册。不应在mixit.on('mixEnd', function(e, state){...})函数内调用函数loop，因为在每次调用期间它都会注册一个新的处理函数。因此，偶数处理程序调用的数量随着时间的推移逐渐增加。这导致了动画效果的大队列。

因此，如果仅在没有问题时注册回调：http://jsfiddle.net/1unLu3d4/3/

几次循环后功能中断

1 个答案: