Stop executing a Javascript function to perform another function

Question

I am developing a system using angular and have the following function:

    function drawLatLong(i, arrayIdColetor) { 
.....
         (não exibi o código por ser grande e achar desnecessário que vcs o analisem)
.....
      });

This function is invoked in a for:

for(var j = 0; j < $kinvey.arrayIdColetor.length;  j++){
   drawLatLong(j, $kinvey.arrayIdColetor);          
 }

The function drawLatLong that is invoked N times according to FOR, it takes a considerable time to be executed as it does relatively heavy searches in the database.

The problem I’m having is that if the user invokes another function without that function drawLatLong has finished, the system does not behave as it should.

Would there be any way to keep this situation under control? That is, only allow the user to perform another function after the drawLatLong has been finalized? Or it would be possible to interrupt the execution of the function drawLatLong in between, if another function is invoked by the user?

I hope I made myself clear. Thanks in advance.

Answer 1

To do this you will need to use .promise(). With it you can do asynchronous programming with javascript.

Take this example

$( "button" ).on( "click", function() {
  $( "p" ).append( "Started..." );

  $( "div" ).each(function( i ) {
    $( this ).fadeIn().fadeOut( 1000 * ( i + 1 ) );
  });

  $( "div" ).promise().done(function() {
    $( "p" ).append( " Finished! " );
  });
});

Answer 2

You can use a callback for that next "for" only be executed at the end of drawLatLong.

function drawLatLong(i, arrayIdColetor, callback) { 
    .....
    (não exibi o código por ser grande e achar desnecessário que vcs o analisem)
    .....
    callback(); 
};

In place of for you can use a function in which you will be "called" (executed) once the drawLatlong has finished.

function callFor(j, arrayIdColetor) {
  if (j < arrayIdColetor.length)
    drawLatLong(j, arrayIdColetor, function() {
      callFor(j + 1, arrayIdColetor)
    });
}
callFor(0, $kinvey.arrayIdColetor);

The following is a demonstration (with amendment proposed in the comment):

    var $kinvey = {
      arrayIdColetor: [5, 12, 124, 636, 47, 45]
    }

    function addEl(txt) {
      var li = document.createElement('li');
      li.innerHTML = txt;
      document.getElementById('demo').appendChild(li);
    }

    function add400(callback) {
      addEl(400);
      callback();
    }

    function drawLatLong(i, arrayIdColetor, callback) {
      addEl(arrayIdColetor[i]);
      setTimeout(function() { //faz uma execução assíncrona
        add400(function() {
          setTimeout(function() { //faz outra execução assíncrona
            //esse callback() foi passado como parâmetro da função "drawLatLong"
            callback();
          }, 1000);
        });
      }, 1000);
    };

    function callFor(j, arrayIdColetor) {
      if (j < arrayIdColetor.length)
        drawLatLong(j, arrayIdColetor, function() {
          callFor(j + 1, arrayIdColetor)
        });
    }
    callFor(0, $kinvey.arrayIdColetor);

<ul id="demo"></ul>

Answer 3

A simple IF condition would not solve the problem?

var executandoAcao = function () {
 for (var j = 0; j < $kinvey.arrayIdColetor.length;  j++) {
   drawLatLong(j, $kinvey.arrayIdColetor);          
 }
return true;
}();

if (executandoAcao) {
      outrafuncao();
}

If you want to interrupt in the middle of the loop, doing so also works:

 function executandoAcao(interromper) {

     for (var j = 0; j < $kinvey.arrayIdColetor.length;  j++) {
             drawLatLong(j, $kinvey.arrayIdColetor);
          if (interromper) {
             break;
          }          
     }
    return true;
 }

 var interromper = (outraFuncao) ? true : false;
 executandoAcao(interromper);

 var outraFuncao = function() {
     var promise = false;
     //aqui a outra função que vc quer executar
     $('#elemento').on('click', function() {
         promise = true;
     });
 return promise;
 }();