javascript检查元素是否可见并相应地设置“setInterval”
[英]javascript to check if element visible and set “setInterval” accordingly
问题描述
LE2. 
LE2。 Any other ideas on how to fix this? 关于如何解决这个问题的任何其他想法？
I have this code and can't figure why is not working properly: 我有这个代码，无法解释为什么不能正常工作：
$(function autorun() {
if ($("#contactForm").is(":visible")){
setInterval( "refreshAjax();", 150000000000 );
}
else {
setInterval( "refreshAjax();", 15000 );
}
setTimeout("autorun();", 2000)
});
... ...
<body onLoad="autorun()">
Right now it keep refreshing the page every 2 secs, even if the "contactForm" is visible. 现在，即使“contactForm”可见，它也会每2秒刷新一次页面。
My logic is: if the "contactForm" is visible, delay the refresh or stop it, keep checking that, but in the mean time refresh the page accordingly to the other statement. 我的逻辑是：如果“contactForm”可见，延迟刷新或停止刷新，继续检查，但同时刷新页面相应的另一个语句。
LE. LE。
$(function() {
refreshAjax = function(){$("#flex1").flexReload();
}
});
LE2. LE2。 Final solution provided here by @Nick Craver 提供最终的解决方案在这里由@Nick Craver
$(function () {
var ajaxTimeout;
function autorun() {
if ($("#contactForm").is(":visible")){
if(ajaxTimeout) {
clearInterval(ajaxTimeout);
ajaxTimeout = false;
}
}
else if(!ajaxTimeout) {
ajaxTimeout = setInterval(refreshAjax, 15000);
}
}
setInterval(autorun, 2000);
});
Thanks, Cristian. 谢谢，克里斯蒂安。
2 个解决方案
解决方案1
3 已采纳 2010-10-30 07:40:49
Currently you are creating a lot of interval timers which is not good. 目前你正在创建很多间隔计时器，这是不好的。 I don't know if this fixes your problem, because apart from that, your code looks ok. 我不知道这是否可以解决您的问题，因为除此之外，您的代码看起来还不错。
Give it a try: 试试看：
var ajaxTimeout;
function autorun() {
if ($("#contactForm").is(":visible")){
if(ajaxTimeout) {
clearInterval(ajaxTimeout);
ajaxTimeout = false;
}
}
else if(!ajaxTimeout) {
ajaxTimeout = setInterval(refreshAjax, 15000);
}
}
$(function() {
setInterval(autorun, 2000)
});
Remember that the time is in milliseconds. 请记住，时间以毫秒为单位。
Update: @tec has another interesting solution. 更新： @tec有另一个有趣的解决方案。 So it depends on what you actually want to achieve with your code. 所以这取决于你实际想用代码实现的目标。
解决方案2
1 2010-10-30 07:42:22
It look like you did not yet fully understand how setTimeout/setInterval work. 看起来你还没有完全理解setTimeout / setInterval是如何工作的。 The first thing you need to know is, that these methods always work asynchronously. 您需要知道的第一件事是，这些方法总是异步工作。 Javascript code never stops and waits or something. Javascript代码永远不会停止并等待。 Instead first your method (and the calling stack) finishes; 相反，首先你的方法（和调用堆栈）完成; after that the delayed method calls are executed. 之后执行延迟的方法调用。 I recommend reading a good explanation of "threading" in javascript like: http://ejohn.org/blog/how-javascript-timers-work/ 我建议在javascript中阅读“线程化”的一个很好的解释，如： http ： //ejohn.org/blog/how-javascript-timers-work/
So in your code autorun() is called every two seconds. 所以在你的代码中，autorun（）每两秒调用一次。 Every two seconds the if is evaluated. 每两秒评估一次if。 If the contact form is visible, nothing happens, as I guess you don't wait 15 Mio seconds. 如果联系表格可见，则没有任何反应，因为我猜您不会等待15 Mio秒。 If it's not visible you start to call refreshAjax() in an Interval of 15 seconds. 如果它不可见，则开始以15秒的间隔调用refreshAjax（）。 But remember: this is done every two seconds. 但请记住：这是每两秒钟完成一次。 so after 15 seconds the first time refreshAjax() is called. 所以15秒后第一次调用refreshAjax（）。 After 17 seconds again and after 19,21, and so on. 经过17秒再次和19,21之后，依此类推。 After 30 seconds it starts being called twice each two seconds. 30秒后，它每两秒开始调用两次。
A simple solution would be this: 一个简单的解决方案是：
$(function autorun() {
if ($("#contactForm").is(":visible")){
// It's visible, so don't do anything.
// But check again in two seconds if it is still visible.
setTimeout( "autorun();", 2000 );
}
else {
// it's not visible, yay!
// Let's refresh and check again in 15 seconds
setTimeout( "autorun();", 15000 );
refreshAjax(); // note that refreshAjax is called instantly, _not_ after 15 seconds
}
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.