javascript - 等到 div 不可见再处理下一行

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>

score 8 · Accepted Answer

您可以使用该setTimeout功能来轮询的显示状态div。此实现每 1/2 秒检查 div 是否不可见，一旦 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>

score 2 · Accepted Answer

如果您的代码在现代浏览器中运行，您始终可以使用MutationObserversetInterval对象并在不支持或不支持轮询setTimeout时回退。

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

小提琴

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 的第三方函数添加一个拦截器，如果可能的话。

例如

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

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

score 2 · Accepted Answer

我使用这种方法来等待一个元素消失，以便之后我可以执行其他功能。

假设只有在 ID 元素消失doTheRestOfTheStuff(parameters)后才调用函数，我们可以使用，the_Element_ID

var existCondition = setInterval(function() {
 if ($('#the_Element_ID').length <= 0) {
    console.log("Exists!");
    clearInterval(existCondition);
    doTheRestOfTheStuff(parameters);
 }
}, 100); // check every 100ms

javascript - 等到 div 不可见再处理下一行

3 回答 3

Related

Reference