javascript检查元素是否可见并相应地设置“setInterval”

LE2。 关于如何解决这个问题的任何其他想法？

我有这个代码，无法解释为什么不能正常工作：

$(function autorun() { if ($("#contactForm").is(":visible")){ setInterval( "refreshAjax();", 150000000000 ); } else { setInterval( "refreshAjax();", 15000 ); } setTimeout("autorun();", 2000) }); 

…

现在它每2秒刷新一次页面，即使“contactForm”可见。

我的逻辑是：如果“contactForm”可见，延迟刷新或停止刷新，继续检查，但同时刷新页面相应的另一个语句。

LE。

 $(function() { refreshAjax = function(){$("#flex1").flexReload(); } }); 

LE2。 最终解决方案由@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); }); 

谢谢，克里斯蒂安。

Answer 1

目前你正在创建很多间隔计时器，这是不好的。 我不知道这是否可以解决您的问题，因为除此之外，您的代码看起来还不错。

试试看：

 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) }); 

请记住，时间以毫秒为单位。

更新： @tec有另一个有趣的解决方案。 所以这取决于你实际想用代码实现的目标。

Answer 2

看起来你还没有完全理解setTimeout / setInterval是如何工作的。 您需要知道的第一件事是，这些方法总是异步工作。 Javascript代码永远不会停止，等待或其他东西。 相反，首先你的方法（和调用堆栈）完成; 之后执行延迟方法调用。 我建议在javascript中阅读“线程化”的一个很好的解释，如： http ： //ejohn.org/blog/how-javascript-timers-work/

因此，在您的代码中，每两秒钟调用一次autorun（）。 每两秒评估一次if。 如果联系表格可见，则没有任何反应，因为我猜您不会等待15 Mio秒。 如果它不可见，则开始以15秒的间隔调用refreshAjax（）。 但请记住：这是每两秒钟完成一次。 所以15秒后第一次调用refreshAjax（）。 经过17秒再次和19,21之后，依此类推。 30秒后，它开始每两秒钟调用两次。

一个简单的解决方案是：

 $(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 } });