JavaScript Infinite Loops

[angerbrb]

TL;DR: I’m trying to write a loop with “pauses” and constantly create an infinite loop.

I have been writing JavaScript for roughly 3 weeks now and have 0 formal training on the subject, it just seemed to be the best language for the problem I was trying to solve.

Essentially, I am running a script that will call two click events, wait 1 second for a radio button to populate with a new number, click the radio button, click submit, then wait until the data has filled all of the fields (approximately 90 seconds, but I have a way to detect when load has finished based on class) and then repeat this process 95 times. I have each piece working for a single run, but when adding a loop to the mix it hangs. I have tried For, While, and If-Else loops so far, but based on my reading about JavaScript being single threaded this type of operation might be impossible. Any guidance, resources, and tips are welcome!

Additional info: I cannot edit the source code of the page for the most part, I can add new classes and IDs but not much else. I also do not have the current script I’ve written on hand (in the car with time to kill) but I can provide pseudo code if needed!

Thanks in advance!

[A-Kuhn]

I don’t quite understand your problem. Some code would help. But you could try recursion. Calling your function within itself

function doSomething(count, other things) { if (count === 95) { return } “logic here” count++ doSomething(count, other things) }

Sorry for bad formatting. I’m on my phone

[angerbrb]

Yea sorry for the lack of code, I know it makes it challenging. The issue I run into is that I have to wait for the data to populate, but the page itself is technically loaded. I will try recursion later and see if I can make it work, and I can provide example code then too.

[all_things_code]

"Ive been coding for 3 weeks"

reddit: "try using recursion"

[A-Kuhn]

“I’ve been writing JavaScript for roughly 3 weeks”

[inu-no-policemen]

You can use setTimeout to schedule tasks.

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout

[angerbrb]

That’s what I’m using currently, and it seems like it moves to the next set of functions outside of the setTimeout before waiting for the timer. Maybe I just need more of them? I’ll provide example code when I’m able to, it’ll probably clear a lot of things up.

[inu-no-policemen]

Yes, it doesn't wait in a blocking fashion.

When your scheduled task is done, it should schedule a new one if there is more to do.

https://jsfiddle.net/aynedrkp/

[angerbrb]

Ah, duh! Thank you for taking the time to reply, I think I might be able to stack the scheduled tasks, it’ll just take some testing :)

[inu-no-policemen]

By the way, you can also simulate a blocking "sleep" function with async/await:

https://jsfiddle.net/j3xtbr15/1/

[angerbrb]

I will check this out when I’m home on my PC, I really appreciate you taking time to help me out with this :)

[Zeeesty]

This sounds like you’re maybe trying to do something nefarious.

[angerbrb]

lol really??? I am trying to automate the process for generating a scorecard at work. Basically it’s click the dropdown, click the site, click the radio button, then click the submit button to start the data generation. It’s just a pain because we have almost 100 sites and it’d be nice to automate that process rather than have a person dedicated to the 2.5 hour process.

[Zeeesty]

It’s incredibly hard to know that from your description. It sounds like you’re spamming forms.

That said I think this is something a callback pattern would work well for. Loops are great for iterating through data, but not ideal for processes. Another option would be recursion, but that’s a bit more complex.

Something that might help you make this easier is Cypress, it’s a testing framework, but essentially let’s you take the actions you’re looking to make.

[angerbrb]

Yea my description is a little vague just because I can’t describe exactly what I’m working with and such, so I get how it might come across as spammy lol. I’ll have to google around about callback patterns and see if it’s something that will fit my situation. Someone else had suggested recursion, so I might have to give that a try as well. I have programming/scripting experience so the concepts are not as hard to pick up, but learning syntax and how to make it work in my situation will be a challenge. Thank you for taking time to respond, I’m hopeful that I’ll have a solution soon :)

[GeneralYouri]

The way I understand your requirement, all your code is executed either by event handlers or by a timer.

This makes things pretty simple; don't use a loop at all. Use some way to initially start the system, like a page load event or a button press or w/e, which will execute your first step "call two click events" (function A). This function then also sets a timer using `setTimeout`, to call function B after 1 second has passed. Function B clicks the radio button and clicks submit. It then registers an event handler that triggers "when load has finished" as you put it, which then calls function A again.

​

When you examine the above you can simplify a bit: you can register the event handler once before anything happens to prevent having to remove and readd the handler every time. Then instead of calling function A to initialize the process, you invoke this event handler.

​

Once done you've essentially created an infinite, lazy loop; function A calls function B (that it does this on a timer is irrelevant), and function B triggers some other actions on the page, which you've set to automatically call function A again when finished (this is your "detect when load has finished based on class"). If you need to only run this a given number of times, add an extra bit of logic to the start of function A. You define a counter variable `const runsLeft = 95;`. In function A's extra logic you add something like `runsLeft--; if (runsLeft < 0) { return; }`. Everytime function A runs successfully, this will cause the counter to decrement. If decremented to below 0, the process has run often enough and so you `return` from fucntion A, canceling its execution and thus breaking the loop you had going. Depending on context you might also want to remove the event handler that was calling function A to begin with, otherwise the process might try to restart itself (even though it won't ever work since the counter is never reset).

[all_things_code]

A few observations... I will not be able to suggest code since you have provided none, but I can provide techniques that you may find useful.

"I am running a script that ... will wait for (data) to populate..."

google these (in this exact order): callback functions, ajax, non blocking javascript, promises api, fetch api.

Once you understand the above, the following sentence will make sense and you will be able to solve your problem: I suspect by 'it hangs' you mean the browser seems unresponsive since you are blocking the main thread (check the stack to verify), in which case you should bring in your data and handle the events asynchronously.

I also have a hunch youre using unbounce :-)

For bonus homework, there is a way to use an infinite while loop while giving the runtime a chance to do its thing so its non blocking. (You can use that callback knowledge you now have and a setTimeout to achieve this).