Как выполнить код JavaScript с соблюдением порядка кода

Question

Я занимаюсь разработкой расширения для Chrome, и мне нужно прочитать информацию со страницы, вставить данные в таблицу базы данных, а затем перейти на следующую страницу и сделать то же самое.

Проблема в том, чтофункция, которая вставляет данные (используя ajax) вставляет 6 строк из 45, прежде чем перейти на следующую страницу, что означает, что мы переходим на следующую страницу, не вставляя остальные данные.

Что я хочудля этого нужно соблюдать порядок кода и вставлять все строки в базу данных, а затем переходить на следующую страницу.код выглядит следующим образом:

for (elt of an) {
  var t = elt.getElementsByClassName('annonce_titre');

  if ((elt.id !== '')) {
    //console.log(().getElementsByTagName('a')[0].href);

    let titleH2 = t[0].getElementsByTagName('h2');
    let titleLink = t[0].getElementsByTagName('a');
    var url = titleLink[0].href;
    var title2 = titleH2[0].innerHTML;
    var last_item = 0;
    var w = elt.getElementsByClassName('titre_wilaya')[0].innerHTML;
    console.log(w);
    var wilaya = w.substring(w.length - 2, w.length);

    console.log("leg0 leng " + (w.length - 2) + " ** " + w.length)
    console.log("wilaya " + wilaya)
    if (isNumber(wilaya)) {
      var city = w.substring(0, w.length - 4);
    } else {
      var city = w;
      wilaya = 16;
    }
    console.log("w c " + wilaya + " ** " + city)

    var num = (elt.id).substring(4, 20)

    // ADD DELAY OF 5 SECONDS BETWEEN PAGE LOADS 
    var logger = setInterval(logNextTitle, 10);

    var inserts = [
      [title2, wilaya, city, url, num]
    ];


    test = test.concat(inserts);

    console.log('test spead ');
    $.ajax({
      data: {
        link: url,
        h2: title2,
        field: "auto",
        last: last_item,
        numero: num,
        wilaya: wilaya,
        city: city,
        items: test
      },
      type: "post",
      url: "http://localhost/insert.php",
      success: function(data) {
        console.log("Data Save: " + data);
      }
    });
  }
}

//window.open(first_link ,'_SELF');
console.log("first_link " + first_link)

Этот код выполняет цикл по всем элементам массива, вставляет данные в БД с помощью ajax и затем переходит на следующую страницу.https://imgur.com/Rw4xrMq

Эта консоль показывает, что эхо "first_link" в коде идет после кода для вставки, но позднее выполняется после эхо.В javascript

есть неправильный порядок

Answer 1

Основы асинхронных вызовов - они начинаются и код продолжается.Проблема с вашим кодом заключается в том, что вы предполагаете, что все они сделаны, когда они все еще стоят в очереди, ожидая, когда их сделают.Поэтому вам нужно подождать, пока они все будут выполнены, прежде чем вы это сделаете.Обещания облегчают это.Так что посмотрите на использование jQuery, когда.

var ajaxCalls = []
for (elt of an) {
  ...
  ajaxCalls.push($.ajax({...}))
}
$.when.apply($, ajaxCalls).then( function () { console.log('done'); } );
// $.when(...ajaxCalls).then( function () { console.log('done'); } );