javascript - How to show a busy indicator for a long non-ajax operation? -

I have a function running on the customer for 2-3 seconds (no AJAX calls).

I am trying to show a "busy / processing" animation due to this operation.

The simple code is as follows:

  var ajaxContainer = $ ('.spinner'); // show $ (AJAXContainer) Show (); // long operation var items = GetItems (); $ .EEEE (item, function (index, value) {PROCESSIM (value.edemID);}); // hide $ (ajaxContainer) .hide ();  

But it does not work as expected. The result I am getting is that the operation runs without showing the spinner. However it shows when the operation ends.

I told you a few posts online that can be done using windows.setTimeout () . But since this operation is based on a dynamic number of items, I do not want to set a specific time limit number in advance. Instead, I would like to show the spinner on the start of the operation, and then hide it when it is over.

Is there a great way to achieve this?

I think you need to add the callback parameter to the ProcessItem function It can check whether all items have been processed or not. Try this type of:

  function processitim (id, callback) {// process and call callback function after callback (); } Var processed itemsquality = 0; Var ajaxContainer = $ ('spinner'); AjaxContainer.show (); // long operation var items = GetItems (); $ .each (item, function (index, value) {process (value.itemID, function () (if (item length = 1 processed itemsquality) {ajaxContainer.hide ();} Otherwise processed items QUANTITY ++; }}}};