Preventing "too much recursion" error in jQuery

Question

EDIT**

I have this click event

$('.next-question').click(function () {

    $('td').removeClass('highlight-problem');
    var r = rndWord;
    while (r == rndWord) {
        rndWord = Math.floor(Math.random() * (listOfWords.length));
    }
    $('td[data-word="' + listOfWords[rndWord].name + '"]').addClass('highlight-problem');
    $('td[data-word=' + word + ']').removeClass('wrong-letter').removeClass('wrong-word').removeClass('right-letter');
    var spellSpace = $('td[data-word=' + listOfWords[rndWord].name + ']').hasClass('right-word');
    if (spellSpace) {

        $('.next-question').trigger('click');

   } else {

        $("#hintSound").attr('src', listOfWords[rndWord].audio);
        hintSound.play();
        $("#hintPic").attr('src', listOfWords[rndWord].pic);
        $('#hintPic').show();
        $('#hintPicTitle').attr('title', listOfWords[rndWord].hint);
        $('#hintPicTitle').show();

    }

});

When debug in the console it says too much recursion meaning it is in some sort of endless loop at this point. I think it is because of the trigger("click") event in the if statement, because I seen something similar online.

Basically, I want to say, if given word has the class right-word then move on (hence the trigger), else ...

Is there another way to write it that will not crash?

Here is a fiddle: http://jsfiddle.net/Dxxmh/112/

INSTRUCTION: Click the letters on the right to spell the highlighted area in the grid (The images to help you spell the words are not available in a fiddle so you have to spell them using the console, by looking up the td's)

Solution 1

I would do something like this:

if (spellSpace) {
            if(score.right != 4)
                $('.next-question').trigger('click');

I see like if(score.right == 4) means the end of game. After it is ended - you have no words (or just have no "right" words, not sure) at all and that is why it never stops. It just triggers click forever instead of stop doing anything and wait for user to click Restart button.

I guess that condition is not enough. Not sure how number of wrong words is counted and handled. But it should be enough to move forward and build correct condition based on your programm logic. Any recursion you start (and you start it with trigger("click")) must have a stop condition.

Solution 2

.trigger('click') will just invoke the listener once more. Did you intend to follow the link only in that circumstance? In that case you could return false in your else scenario.

Solution 3

This isn't a jQuery issue: you're manually triggering the same event from within the handler:

 $('.next-question').trigger('click');

Now, this will cause an infinite loop if you're not careful. Best way to fix this is not to invoke the handler by triggering the event a second time, but by calling it using a function name:

 $('.next-question').click(function callMe(event)
 {
      //replace: $('.next-question').trigger('click');
      //with this:
      if (spellSpace && event)
      {//also check if the event has been passed
          callMe.apply(this,[]);//don't pass event for recursive call
      }
 });

Comments

[gdoron is supporting Monica]

Why you write try, do you expect it to work? can you explain why do you think it will work?

[Milo-J]

Im not sure I get exactly where to place it. Sorry, could you show me? @Elias Van Ootegem

[Mário Rodrigues]

The too much recursion error is due to a bind function on a click event. It happened to me in the past. Probably .next-question is an a anchor or a button which fires itself an event. I had the same issue 2 days ago on an input form. Did that and worked for me.

[Elias Van Ootegem]

@Milo-J: your handler has an if-else at the end, that starts with if (spellSpace) { $('.next-question').trigger('click'); } else {... replace the if (spellSpace) { with if (spellSpace && event) and the $('.next-question').trigger('click'); with callMe.apply(this,[]);, but don't forget to replace $('.next-question').click(function() { with $('.next-question').click(function callMe (event)//<-- give the function a name to call it by

[Viktor S.]

This will only stop on second call once the first round found no correct word. But it will not do what it should.

[Elias Van Ootegem]

Sorry, a bit knackered... it's all a bit fuzzy atm

[gdoron is supporting Monica]

Well, if you can explain the code you posted, why won't you do that in the answer? and btw, I don't think this is the problem, the problem is he's trigger the click event from inside a click handler => infinite loop. it has nothing to do with preventDefault as much as I see.

[Milo-J]

@mOrSa: So where do I add this?

[Milo-J]

So is this the stop condition? Where would I put it? @FAngel

[Viktor S.]

It is stop condition for when game ended with all correct words. I do not know what are the other cases when it could be stopped. And I think that is your task to think on your code and make correct condition.

[Milo-J]

So I should just put it as a seperate statment? @FAngel

[Viktor S.]

What? other conditions? I guess it will be just something like:if(score.right != 4 && score.wrong !=4 && _some_other_possible_condition_) - just build any condition which means that game is not stopped yet.