Javascript/jQuery - repeat check for 5 iterations & run another function if condition is met

Question

I'm having an implementation issue running a script. The outcome I am trying to achieve is as follows.

The script should run by clicking hi_button on the website, wait until btc_digits has finished loading as a result of clicking hi_button (although for this I use setTimeout to give btc_digits plenty of time to finish loading, I am unsure if a ready() function would be better, or how to implement this), then check another output, btc_lose. If btc_lose does not meet a condition for any of the 5 iterations the script starts back at the first iteration function one(). If all 5 iterations meet the condition then another script becomes active. The process then starts over again.

I have tried many variations, none of which work. The most up to date javascript/jQuery is as follows.

rollDice = function() { 
  $('#double_your_btc_bet_hi_button').click() 
  setTimeout(one(), 2500) 

  one() 

  function one() { 
    if ($('#double_your_btc_lose').html() !== '') { 
      $('#double_your_btc_bet_hi_button').click() 
      setTimeout(two(), 2500) 
      two() 
    } else { 
      one() 
    } 

    function two() { 
      if ($('#double_your_btc_lose').html() !== '') { 
          $('#double_your_btc_bet_hi_button').click() 
          setTimeout(three(), 2500) 
          three() 
      } else { 
          one() 
      } 

      function three() { 
        if ($('#double_your_btc_lose').html() !== '') { 
            $('#double_your_btc_bet_hi_button').click() 
            setTimeout(four(), 2500) 
            four() 
        } else {  
            one() 
        } 

        function four() { 
          if ($('#double_your_btc_lose').html() !== '') { 
            $('#double_your_btc_bet_hi_button').click() 
            setTimeout(five(), 2500) 
            five() 
          } else { 
            one() 
          } 

          function five() { 
            if ($('#double_your_btc_lose').html() !== '') { 
                alert("function2") 
            } else { 
                one() 
            } 
          } 
        } 
      } 
    } 
  } 
} 

rollDice()

My original question can be found on Programmers at: https://softwareengineering.stackexchange.com/q/240657/131983

Answer 1

Now that I gave your code some indentation we can see what is going on... Kinda.

Let's start with the use of semicolon in javascript. It isn't required at the end of a code block but you should definitely use it so you don't confuse yourself and others. It is definitely required at the end of a statement when you have another statement after in the code block. A newline is not good enough.(unless you are using coffeescript which will add them for you) So let's add those in. I can't tell what you are trying to do exactly so go add them yourself.

Next let's look at your jQuery. I think you are doing this wrong $('#double_your_btc_bet_hi_button').click(). This tell's jQuery to run the click event for that button. So you are pretty much forcing that button to be clicked. I think what you are trying to do is something like $('#double_your_btc_bet_hi_button').click(function(){/*do something*/});.

Doing setTimeout(myFunc(), 2500) is incorrect. You should just put the function name in there. So setTimeout(myFunc, 2500). Otherwise javascript will call the function when it gets to that point leaving its return value in the setTimeout. So you will be doing something like setTimeout("returned value", 2500) which is obviously not what you want.

Why do you have so many functions declarations inside other functions? Unless you have a reason for having these functions inside one another please break them out. You can still call them if they are declared outside of the block of code you are calling from. Do something like this:

function one(){
  /*do something*/
  two();
}
function two(){
  /*la dee da*/
}

If you still have problems after fixing your syntax errors and make things look a little nicer please comment to the answer and I will take a look. Good luck.

Also read this question before using rollDice = function(){...} instead of using function rollDice(){...}.

Update

Although this still doesn't make a whole lot of since to me, maybe this is more what you are trying to accomplish.

function rollDice() {
  $('#double_your_btc_bet_hi_button').click(function(){
    setTimeout(one, 2500);
  }
}

function one() { 
  if ($('#double_your_btc_lose').html() !== '') { 
    $('#double_your_btc_bet_hi_button').click(function(){
      setTimeout(two, 2500);
    });
  } else { 
    one()
  } 
}

function two() { 
  if ($('#double_your_btc_lose').html() !== '') { 
    $('#double_your_btc_bet_hi_button').click(function(){
      setTimeout(three, 2500);
    }
  } else { 
    one();
  } 
}

function three() { 
  if ($('#double_your_btc_lose').html() !== '') { 
    $('#double_your_btc_bet_hi_button').click(function(){
      setTimeout(four, 2500);
    });
  } else { 
    one();
  } 
}

function four() { 
  if ($('#double_your_btc_lose').html() !== '') { 
    $('#double_your_btc_bet_hi_button').click(function(){
      setTimeout(five, 2500);
    }
  } else { 
    one();
  } 
} 

function five() {
  if ($('#double_your_btc_lose').html() !== '') {
    alert("function2");
  } else {
    one();
  }
}

rollDice();