Javascript/JQuery仅在页面焦点上执行Javascript

Javascript/JQuery Execute Javascript Only On Page Focus

本文关键字：Javascript 焦点 执行 JQuery      更新时间：2023-09-26

在javascript中，如果用户在实际的选项卡/页面上，是否可以只执行javascript？

就像如果他切换到另一个选项卡，那么javascript进程将暂停，当他返回到该选项卡时，javascript将继续该进程。

除非使用特定于浏览器的代码或不完全标准的代码，否则没有直接的方法（请参阅katspaugh的答案）。

"停止"解决方案

  • 设计代码，使其"可停止"。这是你必须根据你的背景来弄清楚的。

  • 然后添加如下内容：

<html> 
<head> 
</head> 
<body> 
    <script> 
    window.onblur = function() {
        yourStopFunctionHere().
    }
    </script> 
</body> 
</html>

"Assert"解决方案

在窗口有焦点的地方插入以下代码：

if(windowHasFocus()) {
    //your code here
}

测试窗口是否有焦点有不同的方法：JavaScript/jQuery:测试窗口是否具有焦点

异步解决方案

whenWindowHasFocus(fn); //where fn is the function you want to only run when window has focus

存在两种可能的实现之一。。。。。

通过setTimeout等待

function WhenWindowHasFocus(yourFunction){
    if(windowHasFocus()) {
        yourFunction();
    }
    setTimeout(function(){ WhenWindowHasFocus(yourFunction); }, 1000);
}

通过自定义事件等待

或者更好的是，如果你可以将依赖于窗口的功能（依赖于有焦点的窗口的功能）封装到一个单独的函数中，然后将该函数"挂钩"到window.onfocus。不过要小心这个。您不希望完全覆盖window.onfocus函数（或者撤消您刚才所做的工作）。相反，您可能不得不使用某种自定义事件。大多数js框架都提供自定义事件。如果采用这种方式，window.onfocus函数只会触发一些自定义事件，并且不必手动使用setTimeout编写任何循环代码。

//The below is pseudo-code. custom events differ between js frameworks
window.onfocus = function(){
    window.FocusEvent.trigger()
}
function WhenWindowHasFocus(yourFunction){
    if(windowHasFocus()) {
        yourFunction();
    }
    window.focusEvent.addOnlyOnce(yourFunction);
}
相关文章：