JavaScript中如何检查页面是否正在加载？

Question

我有一个setInterval函数，它选择一个输入框并使用点击操作提交表单。现在我的问题是，我的功能会点击太多次按钮。我尝试添加一个布尔值来检查是否已被点击。但是不行，页面无法加载。由于某种奇怪的原因，提交按钮有时不起作用。如果页面超时或者运行缓慢，我需要将间隔设为100-1000。

如何确保在页面正在加载时不会再次点击？如果间隔大于1000，代码可以正常工作，但我需要速度。

var pickSize = setInterval(function(){
    if (window.location.href.indexOf('/website/') == -1 && window.location.href.indexOf('/page.php') == -1) {
        if ($('input[value="236"]').attr("checked", true)) {
            $('.Add').click();
        }
    }
}, 1000);

- C O

---

将调用包装在 $(document).ready(function () { /* your code here */ ) 中。 - royhowie

在这种情况下，setInterval 的作用是什么？ - StackSlave

setInterval用于在项目不可用或超时的情况下进行重试。我以前没有这个问题，setinterval会在页面开始重定向时立即停止。现在我的setInterval像疯了一样在轰炸，即使我抛出一个“window.location ='https://www.website.com/checkout.php';”。 - C O

你想要使用setTimeout，但它可能不可预测。你可以在点击后在你的代码中添加clearInterval(pickSize);部分来解决这个问题。更好的做法是使用window.load事件。 - vp_arth

您可以使用此链接（https://dev59.com/NnRA5IYBdhLWcg3w1BqW#807997）来检查JavaScript中的页面加载。 - Jalal Malekpour

Answer 1

你可以使用onbeforeunload事件来检查页面是否已经开始导航到另一个页面：

var interval = setInterval(function(){
    if(window.location.href.indexOf("/website/") == -1 && window.location.href.indexOf("/page.php") == -1) {
        if($('input[value="236"]').attr("checked", true)) {
            $('.Add').click();
        }
    }
}, 1000);

window.addEventListener('beforeunload', function() {
  clearInterval(interval);
  console.log('Started to navigate away...');
});

然而，看起来你需要修复原因，而不是后果。像“为什么我的表单有时只能提交？”这样的问题中发布你的HTML和JS，让我们尝试理解原因。它肯定会因某种原因发生 :)

- Yeldar Kurmangaliyev

Answer 2

试试这个：

var body = document.getElementsByTagName('BODY')[0];
// CONDITION DOES NOT WORK
if ((body && body.readyState == 'loading')) {
DoStuffFunction();
} else {
// CODE BELOW WORKS
if (window.addEventListener) {
    window.addEventListener('load', DoStuffFunction, false);
} else {
    window.attachEvent('onload',DoStuffFunction);
}
}

- lyndact

Answer 3

虽然代码已经很久了，但是在重新审视这个问题后，我认为可以对那些遇到元素不存在问题的人提供一些见解。

解决这个问题的方法是等待元素在动态的ajax调用中完成加载。一旦元素被加载，你现在就可以点击该元素了。

当我创建自动化测试时，这实际上是我个人面临的问题，而你将在许多selenium代码中看到。虽然，我的代码不是selenium，而只是一个常规脚本。考虑使用像selenium或puppeteer这样的库进行任何未来的自动化测试。

- C O

---

实际上，使用JavaScript的async..await，可以执行类似Selenium的代码。我为我们工作中使用的完全SPA（即没有URL更改）的Web应用程序构建了自动化，因此我必须仅依赖于元素存在。我不得不构建一个使用vanilla JS编写的自定义插件，模拟Selenium具有的主要功能，例如预期条件。我可以将此代码包含到我的脚本中，并且我几乎可以像使用Selenium一样自动化。也许对某些人有用：https://github.com/LukeSavefrogs/SeleniumEngineJS - LukeSavefrogs