如何在页面加载10秒后从javascript小部件运行代码？

我创建了一个javascript小部件，可以显示弹出窗口，任何人都可以在关闭

标记之前粘贴几行代码，将其嵌入到自己的网站上

在配置时，用户可以指定在页面加载10秒后显示弹出窗口。但由于我的脚本依赖于

jQuery

，在执行其主代码之前，它必须先加载它-有时脚本执行其

main（）

函数的时间比10秒要晚得多

因此，目前的步骤是：

网页已加载（我不知道需要多长时间）

我的脚本已加载（我不知道需要多少时间）

如果需要，我的脚本将加载jQuery（我不知道需要多长时间）

只有当jQuery加载时，它才开始计数10秒，然后运行

displayppopup

函数

正如您所见，在

$（document）.ready

事件之后10秒内运行

displayppopup

函数是不安全的，因为它可能尚未加载jQuery或自身。没关系，这是一个技术限制，我对此无能为力（对吧？）

我只想知道自从

$（document.ready

事件以来已经过去了多少时间。然后，我将在

main（）

函数中检查这一秒数，并决定是否需要立即显示弹出窗口（如果页面在10秒前加载），或者等待几秒钟

脚本安装代码：

<script>
(function() {
    var scriptTag = document.createElement("script");
    scriptTag.type = "text/javascript";
    scriptTag.async = true;
    scriptTag.src = "https://www.server.com/script.js";

    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(scriptTag, s);
})();
</script>

function main() {
  setTimeout(function() {
    displayPopup();
  }, settings['numberOfSeconds'] * 1000);
}

主要功能：

<script>
(function() {
    var scriptTag = document.createElement("script");
    scriptTag.type = "text/javascript";
    scriptTag.async = true;
    scriptTag.src = "https://www.server.com/script.js";

    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(scriptTag, s);
})();
</script>

function main() {
  setTimeout(function() {
    displayPopup();
  }, settings['numberOfSeconds'] * 1000);
}

---

您可以尝试设置加载jQuery时的标志，然后直接从document.ready启动setTimeout，并在显示弹出窗口之前检查jQuery是否已加载

---

否则你可能想看看这个

在安装代码中，设置捕获当前时间的全局变量。因为这正好在

结束之前，所以应该在加载DOM后立即开始。然后在

main（）

函数中，检查变量中经过了多少时间。如果超过10秒，您可以立即显示弹出窗口。如果时间较短，您可以计算经过的时间，并设置超时，以便在实际经过10秒后触发：

<script>
(function() {
  window.myPopupWidgetStartDate = Date.now();

  var scriptTag = document.createElement("script");
  scriptTag.type = "text/javascript";
  scriptTag.async = true;
  scriptTag.src = "https://www.server.com/script.js";

  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(scriptTag, s);
})();
</script>


function main() {
  var secondsSinceInstall = Math.round((window.myPopupWidgetStartDate - Date.now());

  if (secondsSinceInstall > settings['numberOfSeconds']) {
    displayPopup();
  } else {
    setTimeout(function() {
      displayPopup();
    }, settings['numberOfSeconds' - secondsSinceInstall] * 1000);
  }
}

（功能（）{
window.myPopupWidgetStartDate=Date.now（）；
var scriptTag=document.createElement（“脚本”）；
scriptTag.type=“text/javascript”；
scriptTag.async=true；
scriptTag.src=”https://www.server.com/script.js";
var s=document.getElementsByTagName（'script'）[0]；
s、 parentNode.insertBefore（scriptTag，s）；
})();
函数main（）{
var secondsSinceInstall=Math.round（（window.myPopupWidgetStartDate-Date.now（））；
如果（秒安装>设置['numberOfSeconds']）{
displayPopup（）；
}否则{
setTimeout（函数（）{
displayPopup（）；
}，设置['numberOfSeconds'-secondsSinceInstall]*1000）；
}
}

你不必弄乱时间或间隔。从我的观点来看，考虑到我把一切都做好了，这其实很简单

一旦你得到

document.ready

抓取当前的时间戳。让它成为

documentReadyAt

加载jquery后，再次抓取当前时间戳。让它成为

jqReadyAt

将

jqReadyAt

与

documentReadyAt

进行比较，找出差异。如果jQuery已经存在，差异将是微不足道的。只需几毫秒。如果必须加载jQuery，则差异将超过100毫秒到几秒

开始数数你喜欢的

var documentReadyAt, jqReadyAt;
document.onreadystatechange = function () {
    if (document.readyState === "complete" && documentReadyAt === undefined) {
        documentReadyAt = new Date();
        loadJQ(); // Loading jQuery part of script.js. 
    }
}

//function loadJQ(){ ...whatever you wrote to load jquery }

//For the sake of handling same logic in one place will assign a variable to jqReadyAt here. Could also be done at `main()` without noticeable cost.
function scriptLoadHandler() {
  jqReadyAt = new Date();
  jQuery = window.jQuery.noConflict(true);
  main();
}

//Main will change to that one.
function main() {
  var millisPassedSinceDocLoaded = jqReadyAt.getTime() - documentReadyAt.getTime();
  setTimeout(function() {
    displayPopup();
  }, (settings['numberOfSeconds'] * 1000) - millisPassedSinceDocLoaded );
}

---

您需要使用performance.timingAPI。这里有许多有用的数据可供使用，如domContentLoadedEventEnd、domContentLoadedEventStart、loadEventStart、loadEventEnd等。对于您的案例，在main函数中，使用下面的代码来获取时间流逝。一旦时间流逝，你现在可以决定如何继续

var timePassedSinceDomReady = new Date() - new Date(performance.timing.domContentLoadedEventEnd);
console.log('total time passed: ' + timePassedSinceDomReady + 'ms');

---

大多数现代浏览器都支持它。有关计时API a的更多详细信息，请参见，

Hmmm，可能我没有清楚地说明问题所在…您的代码假设

main（）

函数的代码在

$（文档）上可用。准备好了
回调。但我们这里有两个问题：1）jQuery可能尚未加载（并调用
document.ready
将失败）和2）调用
document.ready中的
main（）
假定
main（）
函数体可用，但
main（）
函数位于我的javascript小部件文件中，该文件是从另一个域加载的，因此在
文档中调用时可能不可用。就绪
哦，我明白了-我的错误。在这种情况下，您可以在
安装代码中启动这样的计时器。如果此代码位于
的末尾，则应在加载DOM后开始计数。我认为这意味着您以后可能需要一个全局变量来跟踪它-为了避免污染全局名称空间，您可以创建一个像
window.myWidget
这样的对象来存储可以在
main（）中检查的计数
函数。我想通过在顶部添加以下行来修改我的安装代码：
window.myPopupWidgetStartDate=new Date（）当我的小部件的
main（）
函数执行时，它可以读取（可以吗？）该
window
全局变量，以确定页面加载后经过的时间。在没有实际的
document.ready
回调的情况下，确定
document.ready
事件是否是一种好方法？（只需借助
Date
对象创建当前时间的快照即可）。是的，您完全可以通过这种方式实现。我已经编辑了我的答案，以捕获安装脚本启动的时间，然后您可以稍后在代码中与之进行比较，类似于您的想法。似乎@dimitrisk是一种记录内部时间的方法<