Почему мой обратный вызов срабатывает до завершения цикла for? - PullRequest
Новая
       7

Почему мой обратный вызов срабатывает до завершения цикла for?

0 голосов
/ 21 ноября 2018

учащийся здесь ... Я использовал технику обратного вызова, которую я выучил здесь , чтобы попытаться получить предупреждение после того, как я добавил свой HTML.Независимо от того, что я делаю, сначала включается мое предупреждение, затем добавляется мой HTML.Исходя из того, что я прочитал, этого не должно быть.Что мне здесь не хватает?Я хотел бы, чтобы мой HTML полностью рисовал (добавляя) до того, как сработает оповещение.Я ценю любое понимание, которое вы можете иметь! 

$(document).ready(function() {
  let data = {
    d: {
      results: [{
        Title: 'title1'
      }, {
        Title: 'title2'
      }]
    }
  };
  createHTML(data, callback);
});


/*NOTE: 'data' is the result of a ajax call which is not included here for brevity*/
function createHTML(data, callback) {
  var tabOneWrap = $('.tabOneWrap');
  var arr = data.d.results;
  for (var i in arr) {
    var item = arr[i];
    tabOneWrap.append(
      '<div class="requestWrap">' + item.Title + '</div>'
    );
  }
  callback();
}

function callback() {
  alert("aloha");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabOneWrap">content</div>

Ответы [ 2 ]

0 голосов
/ 21 ноября 2018

На самом деле, нет хорошего ответа на этот вопрос, потому что именно так работает браузер / js.Быстрое и грязное решение состоит в том, чтобы обернуть ваш обратный вызов в setTimeout или, еще лучше, requestAnimationFrame: 

// setTimeout(callback, 0);
requestAnimationFrame(callback);

Это будет гарантировать, что цикл обработки событий может «обернуться», выполнить некоторую рисование, а затем выполнить вашобратный вызов.

Пока выполняется синхронный код, остальные части механизма времени выполнения просто будут ждать своей очереди.Только когда произойдет асинхронная операция (например, setTimeout или RAF), браузер скажет: «Хорошо, больше ничего не нужно делать, давайте раскрасим экран с любыми изменениями и посмотрим в очереди на любой другой JS, который являетсяготов к исполнению ».

Вот мой любимый разговор на эту тему.Это может быть немного глубоко, если вы новичок в ремесле, но это даст вам ногу вверх, если вы обратите пристальное внимание.

https://youtu.be/cCOL7MC4Pl0

0 голосов
/ 21 ноября 2018

Использование alert() - плохой инструмент отладки.Это останавливает все остальное, в том числе перекрашивание документа.Запись вещей в консоль (F12 в браузере) намного лучше

Я добавил некоторые записи в цикле и в обратном вызове, и вы можете видеть, что порядок такой, как вы ожидаете.Все остальное такое же 

var data = {d:{results:[{Title:'Item 1'},{Title:'Item 2'}]}};

$(document).ready(function(){
    createHTML(data,callback);
});

/*NOTE: 'data' is the result of a ajax call which is not included here for brevity*/
function createHTML(data,callback){
    var tabOneWrap = $('.tabOneWrap');
    var arr = data.d.results;
    for(var i in arr){
        console.log('Loop :: ',i)
        var item = arr[i];
        tabOneWrap.append(
            '<div class="requestWrap">'+item.Title+'</div>'
        );
    }
    console.log('Before callback')
    callback();
}

function callback(){
    console.log("aloha");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabOneWrap"></div>
...