当前可见部分 HTML 时如何连续执行 Javascript 函数？答案

【问题标题】：How to continuously execute Javascript function when part of HTML is currently visible?当前可见部分 HTML 时如何连续执行 Javascript 函数？
【发布时间】：2012-11-10 14:50:58
【问题描述】：

我只想在部分 HTML 文档可见时继续执行特定的 Javascript 函数。这意味着当该部分不再可见时停止函数的执行。

离开可见范围意味着该元素已通过：

滚动（垂直或水平）
切换到其他浏览器标签
关闭标签页/窗口/整个浏览器。

示例代码：我有带有样式的 HTML，以确保我的屏幕 (1920 X 1080) 上的 div 主（整个页面）和 div 目标低于可见范围：

<html>
<head>
    <title>Title</title>
<style type="text/css">
    #main{
        height: 2300px;
    }
    .target{
        border: 1px solid black;
        position: relative;
        top:1000px;
        width:150px;
        height: 150px;
    }
</style>
<script scr="js/jquery.js"></script>
</head>
<body>
    <div id="main">
        <div class="target"></div>
    </div>
</body>
</html>

要订购的 JS/Jquery 代码是什么：

当 div.target 当前可见时触发执行 my_function()

当 div.target 被滚动出去或 tab 被改变时，停止执行 my_function() ?

【问题讨论】：

我会说连续执行的脚本会在一段时间后抛出错误。如果执行脚本，也无法滚动页面。
@Teemu：我见过这样的解决方案有效。为什么脚本执行后我无法滚动页面？
@Teemu 您可以使用setInterval，因此不会连续调用该函数，但会定期调用它，因此它不会阻塞 UI。或者在后台工作人员中运行它。（取决于函数中的内容）。 isVisible 部分有点棘手，然后 Ahren 暗示。 :visible 未检测到滚动出视图。也许this 会有所帮助
是在暗示，经过适当考虑后我删除了我的答案......我同意setInterval或setTimeout点。
没错VDP，我想通过setInterval()定期执行。

标签： javascript jquery dom dom-events

【解决方案1】：

好的，我知道这是一种不好的回答方式。标准是关闭这个问题并指向重复的问题，但是这个问题有两个部分和两个单独的答案。所以，我把答案的链接放在这里：

第 1 部分：检测 HTML 元素何时不在滚动视图中

Check if element is visible after scrolling

第 2 部分：检测选项卡何时不在视图中

How to tell if browser/tab is active

以上两个似乎都有可行的答案。只需实现两者即可获得您想要的。

【讨论】：