Question

我有一个页面，其中有一个表格，我必须在确定的条件下闪烁一些行。

此页面是局部视图，我使用setTimeInterval函数加载它。

问题是，在多次加载页面后，闪烁功能变得疯狂，就像间隔时间已经改变一样。

下面是我使用闪烁页面的代码。

    $('#tblSolicitacao').find('tr').each(function () {
        var status = $.trim($(this).find('#solicitante-status').text());
        switch (status) {
            case "Solicitado":
                $(this).addClass('solicitacao');
                var on = false;
                setInterval(function blink() {
                    on = !on;
                    if (on) {
                        $('.solicitacao').addClass('solicitacao-blink');
                        $('.solicitacao').css("color", "white");
                    } else {
                        $('.solicitacao').css("color", "black");
                        $('.solicitacao-blink').removeClass('solicitacao-blink');

                    }
                    return blink;
                }(), 1000);
                break;

。。

它在switch子句中，用于检查行的状态。

以下我有调用局部视图的主页面。

$(document).ready(function () {

    loadPagina();

    window.setInterval("loadPagina()", 10000);
});

我真的需要帮助，如果你们需要任何其他解释，请不要犹豫，问我。

事先提前。

Answer 1

您正在设置越来越多的间隔。

要么只启动一个单一的间隔，要么在开始新的间隔之前清除前一个间隔：

var blinkInterval = 0
//...
$(this).addClass('solicitacao');
var on = false;
clearInterval(blinkInterval);
blinkInterval = setInterval(function blink() {
    on = !on;
    //...
}(), 1000);

另一种选择是改为使用setTimeout()，只执行一次。

Answer 2

var BlinkerOn = true;    
$(function(){

  //find the things you want to blink
  $('#tblSolicitacao').find('tr').each(function () {
      var status = $.trim($(this).find('#solicitante-status').text());
      switch (status) {
        case "Solicitado":
            $(this).addClass('solicitacao');
            break;
    };
  });


  //add a single interval
  setInterval(function()
  {
    if(BlinkerOn) {
      $(".solicitacao").addClass("classWithCSSyouWant");
    }
    else {
      $(".solicitacao").removeClass("classWithCSSyouWant");
    }
    BlinkerOn = !BlinkerOn;

  },1000);

});

闪烁我的表行的问题。

2 个答案: