功能是幾圈

Question

我試着想出這個問題，爲什麼我的功能幾圈後破爆發後..

當我運行我的網頁及其工作正常，但是當我在瀏覽器中打開另一個選項卡，讓函數運行，讓它做幾個循環，然後回到該網頁的功能是刷新幾次，並在後淡出背景顏色開始閃爍，但它被設置爲2000毫秒..任何想法修復？

我嘗試這樣做：每一個循環之後，再次明確間隔和運行的功能，但它做同樣的事情..

這裏是一個示例：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/