Clicking a button to trigger a delayed click for another buttons

Question

I'm trying to make a button that when it's being a click, it will trigger a click for another button too but with a delay for each of them. For example, if the Main Button is clicked, the Sub Button 1 will trigger a click, then Sub Button 2 will be clicked after 2 seconds and the Sub Button 3 will be clicked after 4 seconds.

The real scenario is a customer can select up to 3 products, the 3 products will be added to a cart if they click the main button because the add to cart button of those 3 products will be clicked too as they click the main button. The products page has an Ajax. If I click the main button, sometimes only 1 or 2 product(s) are being added. I'm trying to delay a click for each button.

 $(".main-button").on("click",function(){ $(".container .row").each(function(i){ $rowNum = $(this).attr("id","row-" + i); $rowNum.find("button").trigger("click").delay(5000).text("clicked"); }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="main-button">Main Button</button> <div class="container"> <div class="row"> <button class="sub-button">Sub Button 1</button> </div> <div class="row"> <button class="sub-button">Sub Button 2</button> </div> <div class="row"> <button class="sub-button">Sub Button 3</button> </div> </div> 

Answer 1

$(".main-button").on("click",function(){
   myLoop ($(".container .row").children().length)
});


var i = 1;                    

function myLoop (count) {          
  setTimeout(function () {    
    $('.container :nth-child('+i+')').children('button').text("clicked")               
      if (i < count) {            
      i++
         myLoop(count);            

      }                       
   }, 1000)
}

Try demo - https://jsfiddle.net/jijomonkmgm/oL3bzp5r/

Answer 2

This isn't specifically what you asked for, but the outcome of the functionality that you seek will be the same.

In the comments, others and myself, talked about how you could choose to call your sub button functions within the main function itself, without having the logic of a chained button clicking functionality.

Before you can do that, you need to make sure that all of your sub functions are within the global scope so that you can access them in your main function.

Example:

subButtonOneFunction() {
    //do something
}

subButtonTwoFunction() {
    //do something
}

subButtonThreeFunction() {
    //do something
}

$(".main-button").on("click",function(){
    $.ajax({
        type: 'POST',
        url: '/path/to/your_page.php',
        data: {
            data : dataVar,
            moreData : moreDataVar
        },
        success: function (html) {
            subButtonOneFunction();
            subButtonTwoFunction();
            subButtonThreeFunction();
            //and so forth
        }
    })
});

The sub button functions in this example is within reach of the main function, and so you will be able to call the sub functions within the main function.

Not knowing if there is more to your main function, other than the delayed, button clicking loop that you were attempting, I tried to provide an example of how an AJAX function works, plus adding a success function where you can call your sub functions.

Firstly, we declare the type . The type is the data type for the data the AJAX function will parse. Notable data types are POST and GET .

Secondly, we declare the url . The url is the page where your data will be parsed to. It can be your current page, or another page entirely.

Thirdly, we declare our variable names for our data that we wish to parse, and what their content is. The variables go by the same logic as any other variables that you know from JavaScript. So they can contain numbers, strings, arrays, whatever you normally know.

Taking one of the data variables from the AJAX example and giving it a value could be done like this:

Our AJAX example: data : dataVar

Literal example: data : $('input#SomeInputContainingValue').val()

our AJAX variable data will now contain the value of an input field that has the id SomeInputContainingValue .

Another example using the clicked elements value: data : $(this).val()

As you can see, the data is simply variables that you would declare as any other JavaScript variable. The difference here is that : is basically the syntax for = in the AJAX function's data array.

Lastly, we declare our success function in the AJAX function. What this does, is that it allows us to "do something" upon success. This is where you can call your sub functions for instance.

This would be a much cleaner approach, and will be much easier to look through when going over the application in the future, and doesn't look like a "hack" or other workarounds.