仅在我的 5 个元素中的 4 个上设置运行

Question

我必须让一些 table-cells 根据它们的值闪烁，显然 IE8 仍然存在，所以我正在努力解决这个问题..

这是我添加闪烁效果的函数：

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

class:

.IEBlink
{
    background-color:red;
}

这适用于我应该闪烁的 5 个细胞中的 4 个。我已经调试并检查了是否将正确的元素传递给了 blinkForIE-method，它为前 4 个元素添加了 setInterval-thing 而不是第 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);
}

相应

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

(elements是数组，$elements是jQuery对象)

问题是，setInterval一定不能执行回调函数，如果执行时没有空闲时间段。当在一个小的时间间隔内有很多次执行时，就会发生这种情况。
您也可以使用不同的偏移量来解决此问题：

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

仅在我的 5 个元素中的 4 个上设置运行

setInterval only running on 4 of my 5 elements

javascript

jquery

internet-explorer

setinterval

仅在我的 5 个元素中的 4 个上设置 运行

setInterval only running on 4 of my 5 elements

javascript

jquery

internet-explorer

setinterval

仅在我的 5 个元素中的 4 个上设置运行