JavaScript blur and click events synchronization

Question

I find it difficult to sync blur and clicks. The scenario is as follows: I have a page in which I have a text box and a button. Now I have a blur event handler for the text field, which basically makes an AJAX request and refreshes part of the page. In addition, I have a click handler for a button that does other work.

Now the problem is that since I have a blur event handler in the text box, when I enter something into the text box and immediately click the button, it launches both blur and clicks (as expected). The problem is synchronizing the two, because the click handler should only be executed after the blur handler returns (if there was any blur event).

Sample code is as follows:

$('#textbox').on('blur', function(){ //make an ajax request }); $('#btn').on('click',function(){ //wait for the blur event to finish(if any) // then execute the code }) 

Answer 1

Try something like this:

http://jsfiddle.net/8m7j5/2/

 var blurring = []; var expecting = false; $(document).ready(function () { $('#textbox').on('blur', function () { // make an ajax request console.log("TEXTBOX BLURRED"); blurring.push(1); // Flag a new blur event $.ajax({ url: "/echo/json/", complete: function () { setTimeout(function () { // Simulate AJAX request taking 2 seconds console.log("AJAX REQUEST COMPLETE"); blurring.pop(); // Flag completed blur event checkClick(); }, 2000); } }); }); $('#btn').on('click', function () { // wait for the blur event to finish(if any) // then execute the code console.log("ACTUALLY CLICKED BUTTON"); expecting = true; checkClick(); }); }); function checkClick() { if (expecting && blurring.length < 1) { console.log("CHECKING: EXPECTING CLICK AND NO MORE BLUR EVENTS"); expecting = false; clickFunction(); } else { console.log("CHECKING: EITHER NOT EXPECTING OR BLUR EVENT(S) STILL OCCURRING"); } } function clickFunction() { console.log("EXECUTING CLICK FUNCTION"); // Put your actual click code here } 

What you really want to do when the button is pressed, enter clickFunction .

Answer 2

The code from ianpgall is slightly improved:

 var functionsToCall = []; var ajaxRunning = false; $(document).ready(function(){ $('#textbox').on('blur', function(){ ajaxRunning = true; console.log("START AJAX REQUEST"); $.ajax({ url: "/echo/json/", complete: function () { setTimeout(function () { // Simulate AJAX request taking 2 seconds console.log("AJAX REQUEST COMPLETE"); ajaxRunning = false; fireStackedCalls(); }, 5000); } }); }) $('#btn').on('click',function(){ if(ajaxRunning === true) { functionsToCall.push('clickFunction()'); } else { clickFunction(); } }); function fireStackedCalls() { while(functionsToCall.length > 0) { toCall = functionsToCall.pop(); eval(toCall); } } function clickFunction() { console.log("EXECUTING CLICK FUNCTION"); // Put your actual click code here } }); 

Now every call to the clickFunction is recorded and executed if an ajax request is executed.