How can I proceed firing events after using stopImmediatePropagation() in jQuery?

I'm using css classes for firing events/functions.

<button class="func_check_data func_proceed">

The button calls different functions on the click event.

func_check_data() checks valid data and saves it on success.

So when function func_check_data() throws an error, func_proceed() shouldn't be fired.

By using event.stopImmediatePropagation() in func_check_data I get this working.

But, when func_check_data doesn't throw an error, func_proceed is fired, before func_check_data has saved the data successfully via ajax.

So is there any function which can be used to delay following events until the first one is finished?

No. You'll want to have a single event handler that does this coordination, rather than multiple uncoordinated event handlers.

For instance:

• .func_check_data that aren't also .func_proceed elements can call the check data function handler.
• Similarly, .func_proceed that aren't also .func_check_data elements can call the proceed function handler.
• .func_check_data.func_proceed elements (e.g., ones that are both) would use a third handler that does the data check and ajax save, then when the ajax save is complete, does the proceed part.

The typical way to handle this kind of chaining logic is either:

• a switch or a block of if/else's that routes the flow from one function to the other by manually calling the other function, or
• an ajax request/response, where the response runs the follow-up function

e.g.

function follow_up(data) { /* do stuff */ }
function cancel(data) { /* undo stuff */ }
function clickHandler(e) {
  let url = 'foo';
  let data = {bar: 'baz'};
  $.ajax({
    url: url, data: data, method: 'POST',
    success: follow_up,  // see funcs above
    error: cancel,       // see funcs above
  });
}

Also, be aware you can manually trigger specific events with $.trigger('eventName').