Question

I have the following JS code

$('#dialog').dialog({
  ...
  buttons: {
    OK: function() {
      callAjax({"some":"param"});
      $('#dialog').dialog('close');
    }
  }
});

var ajaxBatch = [];

function callAjax(cmd) {
  ajaxBatch.push(cmd);
  if (ajaxBatch.length == 1)
    setTimeout(ajaxItself, 1);
}

function ajaxItself() {
  ajaxBatch.push({"minor":"data"});
  $.post('url', { msg: JSON.stringify(ajaxBatch) });
  ajaxBatch = [];
}

Theoretically I should always got [{"some":"param"},{"minor":"data"}].

But frequently I got error log entries on wrong requests with [{"some":"param"},{"some":"param"},{"minor":"data"}] there.

How such things may happen? Do the A4 mice with their 2x button make sense here, or what?

BTW, I can’t reproduce the situation, I just see it in logs. And User-Agent is not bounded to particular browser there either.

Answer 1

The browser might have queued up more than 1 click event, so whether or not the button is visible for them to keep clicking, the events were already set in motion.

Maybe set a flag in your OK: function

if (!dialogIsClosed) {
      callAjax({"some":"param"});
      $('#dialog').dialog('close');
      dialogIsClosed = true;
}

I would imagine a browser would choose processing an item from the event queue over processing an item from the setTimeout queue.