javascript 等到 div 不可见才能处理下一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19062431/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Wait until div is not visible to process next line
提问by user2524908
I need to write some code which is supposed to wait until a predefined divis no longer visible in order to process the next line. I plan on using jQuery( ":visible" )for this, and was thinking I could have some type of whileloop. Does anyone have a good suggestion on how to accomplish this task?
我需要编写一些应该等到预定义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);
}
}
divwhen not visible:
div不可见时：
<div class=?"mstrWaitBox" id=?"divWaitBox" scriptclass=?"mstrDialogImpl" dg=?"1" ty=?"edt">?
</div>?
divwhen visible:
div可见时：
<div class=?"mstrWaitBox" id=?"divWaitBox" scriptclass=?"mstrDialogImpl" dg=?"1" ty=?"edt" visibility="visible">?
</div>?
回答by Jason
You can use the setTimeoutfunction to poll the display status of the div. This implementation checks to see if the div is invisible every 1/2 second, once the div is no longer visible, execute some code. In my example we show another div, but you could easily call a function or do whatever.
您可以使用该setTimeout函数来轮询div. 此实现每 1/2 秒检查一次 div 是否不可见，一旦 div 不再可见，则执行一些代码。在我的示例中，我们展示了另一个 div，但您可以轻松调用函数或执行任何操作。
Script
脚本
$(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
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>
回答by prime
I used this approach to wait for an element to disappear so I can execute the other functions after that.
我使用这种方法来等待元素消失，以便在那之后执行其他函数。
Let's say doTheRestOfTheStuff(parameters)function should only be called after the element with ID the_Element_IDdisappears, we can use,
假设doTheRestOfTheStuff(parameters)只有在具有 ID 的元素the_Element_ID消失后才能调用函数，我们可以使用，
var existCondition = setInterval(function() {
if ($('#the_Element_ID').length <= 0) {
console.log("Exists!");
clearInterval(existCondition);
doTheRestOfTheStuff(parameters);
}
}, 100); // check every 100ms
回答by plalx
If your code is running in a modern browser you could always use the MutationObserverobject and fallback on polling with setIntervalor setTimeoutwhen it's not supported.
如果您的代码在现代浏览器中运行，您可以始终使用MutationObserver对象，并在不支持setInterval或setTimeout不支持轮询时回退。
There seems to be a polyfillas well, however I have never tried it and it's the first time I have a look at the project.
似乎也有一个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);
However an even better alternative in my opinion would be to add an interceptor to third-party function that's hiding the div, if possible.
但是，在我看来，更好的替代方法是在可能的情况下向隐藏 div 的第三方函数添加拦截器。
E.g
例如
var hideImportantElement = function () {
//hide logic
};
//intercept
hideImportantElement = (function (fn) {
return function () {
fn.apply(this, arguments);
console.log('element was hidden');
};
})(hideImportantElement);
