的setInterval只在我的5個元素

Question

我必須做出一些表細胞眨眼根據它們的值，顯然IE8仍然是一個事情的4上運行，所以我正在修復該..

這裏是我的功能添加閃爍效果：

function blinkForIE(element) { 
    setInterval(function() { 
     if (element.hasClass('IEBlink')) { 
      element.removeClass('IEBlink'); 
     } 
     else { 
      element.addClass('IEBlink'); 
     } 
    }, 100); 
} 

類：

.IEBlink 
{ 
    background-color:red; 
} 

這適用於我的5個細胞應閃爍4。我已經調試和檢查taht正確的元素越來越傳遞到blinkForIE - 方法，並將其添加了setInterval -thing的第4個元素，但不是第5 ..

任何人都知道爲什麼會發生？ （我不確定可能需要什麼信息，所以如果你需要別的東西，請發表評論，我會盡快添加它。）

編輯：仍然不確定你們需要看到什麼，但這裏是所有的jQuery

var threshold = 100; //---THIS can be changed to what ever our threshold-difference should be. 

$(document).ready(function() { 
    var itemsIndex; 
    var locationIndex; 
    var locations = [""]; 

    $('#<%= gvKeying.ClientID %> tbody tr.GridHeader th').each(function() { 
     if ($(this).html() === 'Items') { 
      itemsIndex = $(this).index() + 1;  //Find the column index of the Items column (+1 for nth-child usage) 
     } 
     else if ($(this).html() === 'KeyingLocation') { 
      locationIndex = $(this).index() + 1; //And the same for KeyingLocation-column. 
     } 
    }); 

    $('#<%= gvKeying.ClientID %> tbody tr td:nth-child(' + locationIndex + ')').each(function() { 
     if ($(this).html() === '&nbsp;') { 
      //Do nothing. 
     } 
     else { 
      locations.push($(this).html());  //Add all locations to an array 
     } 
    }); 
    locations = unique(locations);    //Make them unique 
    locations.shift();       //This just removes the first empty element. 

    for (var i = 0; i < locations.length; i++) { //Loop through all locations 
     var values = []; 
     var valuesToBlink = []; 

     $('#<%= gvKeying.ClientID %> tbody tr').each(function() { 
      if ($(this).find('td:nth-child(' + locationIndex + ')').html() === locations[i]) { 
       values.push($(this).find('td:nth-child(' + itemsIndex + ')').html());    //Make an array with all the values. 
      } 
     }); 
     values = getTop5(values); //We just want the top 5 highest values. 
     var firstBlinkVal = -1; 

     for (var j = 0; j < values.length - 1; j++) {      //Loop through the values. 

      if (firstBlinkVal > -1 && compare(values[j], values[j + 1]) > -1) { 
       firstBlinkVal = Math.min(firstBlinkVal, compare(values[j], values[j + 1])); 
      } 
      else if(compare(values[j], values[j + 1]) > -1){ 
       firstBlinkVal = compare(values[j], values[j + 1]); 
      } 
     } 

     if (firstBlinkVal > -1) { 
      for (var j = 0; j < values.length; j++) { 
       if (values[j] >= firstBlinkVal) { 
        valuesToBlink.push(values[j]); 
       } 
      } 
     } 

     $('#<%= gvKeying.ClientID %> tbody tr').each(function() {         //Loop through all rows. 
      if ($(this).find('td:nth-child(' + locationIndex + ')').html() === locations[i]) {  //If this row is the current location, 
       var temp = $(this).find('td:nth-child(' + itemsIndex + ')').html();     //get the value for this row. 
       if (jQuery.inArray(temp, valuesToBlink) > -1) {          //if we want this to blink, 
        var ua = window.navigator.userAgent; 
        var msie = ua.indexOf("MSIE "); 

        if (msie > 0) { 
         blinkForIE($(this).find('td:nth-child(' + itemsIndex + ')'));    //make it blink for IE 
        } 
        else { 
         $(this).find('td:nth-child(' + itemsIndex + ')').addClass('blink_me');  //make it blink for everything else. 
        } 
       } 
      } 
     }); 
    } 

}); 

function blinkForIE(element) { 
    var x = element.html(); 
    console.log(x); 
    setInterval(function() { 
     if (element.hasClass('IEBlink')) { 
      element.removeClass('IEBlink'); 
     } 
     else { 
      element.addClass('IEBlink'); 
     } 
    }, 100); 
} 

//This just compares two values and returns true if the diff is over our threshold. 
function compare(val1, val2) { 
    if (Math.abs(val1 - val2) > threshold) { 
     return Math.max(val1, val2); 
    } 
    return -1; 
} 

//Returns a sorted array of the top5 highest values in the input-array. 
function getTop5(values) { 
    values.sort(function (a, b) { return b - a }); 
    while (values.length > 5) { 
     values.pop(); 
    } 
    values.sort(function (a, b) { return a - b }); 
    return values; 
} 

//Makes the values of the input unique. 
function unique(list) { 
    var result = []; 
    $.each(list, function (i, e) { 
     if ($.inArray(e, result) == -1) result.push(e); 
    }); 
    return result; 
} 

Answer 1

你應該叫只有1 setInterval功能，通過所有細胞中的動畫。

function blinkForIE(elements) { 
    setInterval(function(){ 
    elements.forEach(function(e){$(e).toggleClass('IEBlink')}) 
    }, 100); 
} 

resp。

function blinkForIE($elements) { 
    setInterval(function(){ 
    $elements.toggleClass('IEBlink') 
    }, 100); 
} 

（elements是數組，$elements是jQuery對象）

的問題是，必須setInterval不執行回調函數，如果在執行時間沒有空閒時隙。它發生時，在很短的時間間隔內執行很多次。
可以解決此也使用不同的偏移：

setTimeout(function(){setInterval(callback, 100)}, i*15)