仅当访问者看到网页时才执行代码

Question

我想播放动画并确保访问者会看到它。我的问题是，当某人在后台打开一个新的浏览器标签时（例如通过点击target="_blank"的链接），文档的准备活动是不够的，因为访问者有可能只会在几分钟后观看该网站，所以他从一开始就看不到动画或任何东西。

只有当用户点击该浏览器标签时，是否有办法启动我的动画（通过运行正确的JavaScript函数）？是否有可能模仿此行为的事件或任何其他解决方法？如果代码仅在第一次执行或每次用户单击浏览器选项卡时执行都无关紧要。

Answer 1

试试requestAnimationFrame。如果选项卡未激活，则动画帧将不会出现，直到它为止。

我用它来推迟＆＃34;自动更新＆＃34;在我的一些页面上，它确实有效 - 我甚至得到了积极的反馈：）

Answer 2

根据这个答案：How to tell if browser/tab is active

您可以使用window.onfocus和window.onblur事件查看标签是否处于活动状态。

var isActive;

window.onfocus = function () { 
  isActive = true; 
}; 

window.onblur = function () { 
  isActive = false; 
};