Question

我需要编写一些代码，这些代码应该等到预定义的div不再可见，以便处理下一行。我打算在此使用jQuery( ":visible" )，并且认为我可以使用某种类型的while循环。有没有人对如何完成这项任务有一个很好的建议？

$( document ).ready(function() {
    $(".scroller-right" ).mouseup(function( event ) {
        alert('right');
        pollVisibility();
    });
});

function pollVisibility() {
     if ($(".mstrWaitBox").attr("visibility")!== 'undefined') || $(".mstrWaitBox").attr("visibility") !== false) { 
            alert('inside else');
            microstrategy.getViewerBone().commands.exec('refresh');       
     } else {
              setTimeout(pollVisibility, 100);
     }
}

$( document ).ready(function() {
    $(".scroller-right" ).mouseup(function( event ) {
        alert('right');
        pollVisibility();
    });
});

function pollVisibility() {
     if (!$(".mstrWaitBox").is(":visible")) {
        alert('inside if');
        microstrategy.getViewerBone().commands.exec('refresh');     
    } else {
        setTimeout(pollVisibility, 100);
    }
}

不可见时

div：

<div class="mstrWaitBox" id="divWaitBox" scriptclass="mstrDialogImpl" dg="1" ty="edt">
</div>

div可见时：

<div class="mstrWaitBox" id="divWaitBox" scriptclass="mstrDialogImpl" dg="1" ty="edt" visibility="visible">
</div>

Answer 1

您可以使用setTimeout功能轮询div的显示状态。此实现检查div是否每1/2秒不可见，一旦div不再可见，执行一些代码。在我的示例中，我们展示了另一个div，但您可以轻松地调用函数或执行任何操作。

http://jsfiddle.net/vHmq6/1/

<强>脚本

$(function() {
  setTimeout(function() {
    $("#hideThis").hide();    
  }, 3000);
  pollVisibility();

  function pollVisibility() {
      if (!$("#hideThis").is(":visible")) {
          // call a function here, or do whatever now that the div is not visible
          $("#thenShowThis").show();
      } else {
          setTimeout(pollVisibility, 500);
      }
  }
}

<强> HTML

<div id='hideThis' style="display:block">
  The other thing happens when this is no longer visible in about 3s</div>

<div id='thenShowThis' style="display:none">Hi There</div>

Answer 2

我使用这种方法等待一个元素消失，所以我可以在那之后执行其他函数。

假设只有ID table1 bookid bookname author 0 No book no author 1 Engg Maths Greiwal 2 Java Basics James Gosling 3 Mahabharata Ved Vyasa 4 Ramayana Valmiki 5 Harry Potter JK Rowling table2 userid name bookid 1 Arjun 2 2 Charles 2 3 Babbage 3的元素消失后才能调用doTheRestOfTheStuff(parameters)函数，我们可以使用，

the_Element_ID

Answer 3

如果您的代码在现代浏览器中运行，则可以始终使用MutationObserver对象，并在不支持时使用setInterval或setTimeout进行回溯。

似乎还有polyfill，但是我从未尝试过，这是我第一次看到这个项目。

FIDDLE

var div = document.getElementById('test'),
    divDisplay = div.style.display,
    observer = new MutationObserver(function () {
        var currentDisplay = div.style.display;

        if (divDisplay !== currentDisplay) {
            console.log('new display is ' + (divDisplay = currentDisplay));
        }
    });

//observe changes
observer.observe(div, { attributes: true });

div.style.display = 'none';

setTimeout(function () {
    div.style.display = 'block';
}, 500);

然而，在我看来，更好的替代方案是将拦截器添加到隐藏div的第三方函数中，如果可能的话。

E.g

var hideImportantElement = function () {
    //hide logic
};

//intercept
hideImportantElement = (function (fn) {
    return function () {
        fn.apply(this, arguments);
        console.log('element was hidden');
    };
})(hideImportantElement);

等到div不可见以处理下一行

3 个答案: