CODEWITHSUNDEEP
javascriptjqueryloopsif-statementrecursion
Milo-J
Milo-J

Reputation: 1108

Preventing "too much recursion" error in jQuery

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)

Upvotes: 5

Views: 34344

Answers (4)

Viktor S.
Viktor S.

Reputation: 12815

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.

Upvotes: 2

Elias Van Ootegem
Elias Van Ootegem

Reputation: 76395

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

Upvotes: 2

Mário Rodrigues
Mário Rodrigues

Reputation: 862

Try to use this:

$('.next-question').click(function (event) {
     event.preventDefault();
 });

Upvotes: 0

David Hedlund
David Hedlund

Reputation: 129792

.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.

Upvotes: 2

Related Questions