Javascript endless loop without for

Question

This function is running continuously without initiating a loop.

The setTimeout is to allow the refreshTags function to run.

I'm sure it's not the best-written script - I'm no guru - but any ideas on why this script is running in an endless loop?

function addTag() 
{
console.log('running'); 
refreshTags(); 
var t = document.getElementById('existingTags').textContent.match(/tag1/); 
var u = 'tag1'; 
if (t == u) {alert('This ticket has already been resolved by our team.')}; 
if (t != u) 
    {
    refreshTags();
    setTimeout(function() 
    {
        document.getElementById('tagToAdd').value = 'tag1';
        document.getElementById('tagSubmit').click(); 
        alert('Ticket resolved!'); 
    }, 2000)
}; 
}

Edit: code calling addTag below.

var resolveButton = document.createElement("a");
resolveButton.href = '#';
resolveButton.innerHTML = '<span>Resolve</span>';
resolveButton.setAttribute("onClick", "addTag()");
resolveButton.setAttribute("type", "button");
resolveButton.setAttribute("class", "button1");

var cha = document.getElementById('chatter_view');
cha.parentNode.insertBefore(resolveButton, cha);

may be because of this line that simulates a click document.getElementById('tagSubmit').click(); — i--
– i--, Commented Aug 27, 2012 at 4:29
Again, please forgive my ignorance - why would this cause an issue? — raspberry_door
– raspberry_door, Commented Aug 27, 2012 at 4:31
What does the refreshTags function look like? Does it call addTag by chance? — user462356
– user462356, Commented Aug 27, 2012 at 4:33
was just a guess. need to see more of your code. in particular when you run the add tag function. — i--
– i--, Commented Aug 27, 2012 at 4:34
He's not wrong, it could be a problem if the tagSubmit element has an onclick handler which in turn calls addTag again. — user462356
– user462356, Commented Aug 27, 2012 at 4:36

James deBoer · Accepted Answer · 2012-08-27 05:11:43Z

0

Instead of trying to answer why this particular piece of code has an infinite loop, I'll attempt to answer the bigger question "How do you prevent and debug infinite loops?".

One of the best defenses I've found is to structure your code so control is always flowing in one direction. You have a number of different layers here:

the onclick event handler is calling into addTag()
addTag() is calling refreshTags()
addTag() is calling a setTimeout, which later triggers a click on the DOM.

A simple fix to keep your code flowing in one direction is to create dedicated event handlers, e.g. resolveButtonOnclick() { addTag() }. resolveButtonOnclick is only ever called from the resolveButton's onclick handler. This makes it much easier to audit your code. You've already put a console.log('running') at the top of your addTag() function. Now, if you put a console.log() in resolveButtonOnclick() you'll know right away if the onclick handler is included in your infinite loop.

We can't see your code, but if refreshTags() calls addTag() you would have a circular control flow -- these aren't always bad, but you need to be extra careful that they terminate at some point.

The biggest circular control flow you may have is that addTag() is calling back into the DOM with the .click() method. It would be better, faster and cleaner to submit the form directly from the Javascript or use an XHR.

To debug this loop, you are one the right track with the console.log()s. Add more of them (e.g. every place you call addTag()) and figure out where it is being called from. The other thing you could try is using Chrome's DevTools: add a 'debugger;' call to the top of addTag() and examine the stack trace.

answered Aug 27, 2012 at 5:11

James deBoer

2,50515 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

raspberry_door Over a year ago

Thanks for your thoughtful answer, James. I was able to resolve my issue earlier - see my comment to my original question - there were two addTag functions, one in the script, one (that I didn't write) in the page. I have a lot to learn, I am not a developer, which I'm sure is evident, and I do a lot of my learning from code written by actual developers at my company - so maybe I've been picking up some bad habits! :) But while this is not my day job it's a lot of fun to learn new ways like this to think about structuring code. Thanks again for sharing, I'll try to implement this method.

Collectives™ on Stack Overflow

Javascript endless loop without for

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related