[Note] the impact of Ajax Asynchronization on events

Keep a record of the small items found in your work, and you may not repeat it in the future!

I just found a problem at work. Ajax calls to asynchronous requests will have a great impact on the event!

Many people may know this, but I did not write it to you, But I recorded it myself to deepen my memory.

After solving this problem, I remembered that the elevation was introduced in this article. It's strange that I didn't take it seriously at the time. JS is a single thread, which is basically known. This raises the issue of Ajax execution in an event.

This is a general process with Ajax in the event.

When an event is bound to a tag or DOM elements such as checkbox and radio, there is a default action. If the normal process is as green to yellow as shown in the figure above, but there will be a delay in the middle of the Ajax request, the browser will set the yellowCodeBlock migration is executed first, and then the Ajax callback function is executed after the Ajax request is returned. This causes the default behavior of DOM elements to be executed before the Ajax callback function.

My solution is to block the default behavior in the yellow code block and manually trigger the behavior in the callback function. Of course it is not the optimal solution. You can leave a message if you have a better solution!