Alert being repeated through . each() ajax

Question

I got the following jQuery:

$("#apagar-marcados").click(function(){
    var lista_marcados = document.getElementsByName('id_mensagem[]');
    $.each(lista_marcados, function(i, item){
        if ($(item).prop('checked')){
            $.ajax({
                type: "POST",
                url: BASE_URL + "ajax/remover_mensagem",
                data:{id_mensagem: $(item).val()}, 
                cache: false,

                success: function(){
                    alert('atualizado')
                }
            });                 
        }
    });
});

In this, I update via SQL in the database, until then, works perfectly. In this case, I have a checkbox listing, which in turn, marked, with the click of the delete button, will enter this action.

The problem is, if I select 10 checkbox, the alert('atualizado') 10x, as I do to appear only once?

Answer 1

You should consider only sending 1 ajax to the server and letting the server make the changes to the database. If that application is large and you have many users sending N ajax that way it can be heavy for the server to manage.

To send only 1 ajax you could do so:

$("#apagar-marcados").click(function() {
  var lista_marcados = document.getElementsByName('id_mensagem[]');
  var marcados = [].filter.apply(lista_marcados, function(item) {
    return item.checked;
  }).map(function(item) {
    return item.value;
  });

  $.ajax({
    type: "POST",
    url: BASE_URL + "ajax/remover_mensagem",
    data: {marcados: marcados},
    cache: false,
    success: function() {
      alert('atualizado')
    }
  });

});

But in answer to your question you can ask like this:

$("#apagar-marcados").click(function() {
  var items = $('[name="id_mensagem[]"]').get();
  var ajaxs = items.reduce(function(arr, item) {
    if (!item.checked) return arr;
    const ajax = $.ajax({
      type: "POST",
      url: BASE_URL + "ajax/remover_mensagem",
      data: {id_mensagem: item.value},
      cache: false
    });
    return arr.concat(ajax);
  }, []);

  $.when.apply($, ajaxs).done(function() {
    alert('Concluído!');
  });
});