Check if page is loading in JavaScript?

Question

I have a setInterval that selects an input and then submits the form with a click action. Now my problem is that my function clicks the button too many times. I tried adding a boolean to check if it has been clicked. No dice, page won't load. For some odd reason, the submit button doesn't work sometimes. I need the interval to be at 100 - 1000 just in case the page timeouts or lags.

How do I check to make sure it doesn't click again while the page is trying to load? The code can work fine if the interval is above 1000, but I need speed.

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);

wrap the call in `$(document).ready(function () { /* your code here */ )` — royhowie, Nov 13 '15 at 03:22
setInterval is for reattempts in a situation where an item becomes unavailable, or times out. I use to not have this issue, the setinterval would just stop as soon as the page begins to redirect. My setInterval is now spamming like crazy even when I throw a "window.location='https://www.website.com/checkout.php';" — C O, Nov 13 '15 at 03:27
You are want to use `setTimeout`, but it can be unpredictable, you can to add `clearInterval(pickSize);` part to your code after click. Better, use `window.load` event — vp_arth, Nov 13 '15 at 03:55
you can use this [link](https://stackoverflow.com/a/807997/12912298) for Check page is loading in JavaScript — Jalal Malekpour, Jul 12 '21 at 07:58

score 1 · Answer 1 · answered Nov 13 '15 at 03:48

You can use onbeforeunload event to check if the page has started to navigate to another page:

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...');
});

However, it looks like you need to fix causes, but not consequences. Post your HTML and JS into another question like "why does my form submit only sometimes?" and let's try to understand the reason. It definitely does happen for some reason :)

score 0 · Answer 2 · answered Nov 13 '15 at 03:35

Try this:

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);
}
}

score 0 · Answer 3 · answered Jul 16 '19 at 01:01

It's been years and the code is long gone but after revisiting this question I feel that I can offer some insight to those who are having issues with elements not being there.

The solution to this problem was to wait for the element to finish loading dynamically via an ajax call at the time. Once the element is loaded, you now have the ability to click that element.

This is actually something I personally face when creating automated testing and you will see in a lot of selenium code. Although, my code above was not selenium and it was just a regular script at the time. Consider using a library like selenium or puppeteer for any future automated testing.

Actually using Javascrypt `async..await` it's possible to execute Selenium-Like code. I built an automation for a Web application we use at work that is completely SPA (aka no url changes) so i had to rely solely on elements being there. I had to build a custom plugin written in vanilla JS that simulates the main functions REALLY useful Selenium has, such as Expected Condtions. I can include this code into a script of mine and i can automate almost like as if i were using selenium. Maybe it will be useful to someone: https://github.com/LukeSavefrogs/SeleniumEngineJS — LukeSavefrogs, Oct 18 '20 at 09:41

Check if page is loading in JavaScript?

3 Answers3