AJAX JQuery: порядок выполнения событий

Question

У меня есть веб-страница с различными элементами (список ссылок и два блока выбора), связанный между ними. Нажатие на них может повлиять на один из других элементов, и все их значения способствуют обновлению значения, отображаемого на странице.

Таким образом, код таков:

$(document).ready(function() { 

    var someVar = ''; 

    $("select#size").bind('change', function() { 
     someVar = $(this).val(); 
     console.log('first'); 
    }); 

    my_change(); 
    console.log('second' + someVar); 
}); 

function my_change() { 

    $.getJSON("photos/change_product", {json_stuff}, function(data) { 
     var options = []; 
     for (var i = 0; i < data.length; i++) { 
      options.push('<option value="' + data[i].id + '">' + data[i].label + '</option>'); 
     } 
     $("select#size").trigger('change'); 
     $("select#options").html(options.join('')).trigger('change'); 
    }) 
}; 

}; 

Когда я загружаю страницу функция my_change называется. Он делает кое-что, а затем запускает change event на select-box. Мне нужно обновить значение, используя то, что находится внутри этого окна выбора, и только затем продолжить выполнение. Поэтому мне нужен этот код, чтобы напечатать «first», а затем «second» со значением переменной. На самом деле происходит то, что он печатает «второй» «первый».

Я думаю, это потому, что я выполняю асинхронные вызовы. Что я могу сделать?

Answer 1

«второй» console.log() вызывается первым, так как ожидает асинхронные $.getJSON() вызова для ответа от сервера перед обжигом его функции обратного вызова. Вы можете сохранить объект jqXHR переменной, а затем использовать это, чтобы запустить свой «второй» consone.log() с $.when():

$(function() { 

    var someVar = ''; 

    $("#size").on('change', function() {//on() is the same as bind() here 
     someVar = $(this).val(); 
     console.log('first'); 
    }); 

    //save the jQuery XHR object from your $.getJSON request 
    var jqXHR = my_change(); 

    //when the above jQuery XHR object resolves, it will fire the second console.log 
    $.when(jqXHR).then(function() { 
     console.log('second' + someVar); 
    }); 
}); 

function my_change() { 

    //here we return the jQuery XHR object for the $.getJSON request so we can run code once it resolves 
    return $.getJSON("photos/change_product", {json_stuff}, function(data) { 
     var options = []; 
     for (var i = 0; i < data.length; i++) { 
      options.push('<option value="' + data[i].id + '">' + data[i].label + '</option>'); 
     } 
     $("#size").trigger('change'); 
     $("#options").html(options.join('')).trigger('change'); 
    }) 
}; 

Вот документация $.when(): http://api.jquery.com/jquery.when

Быстрый боковой примечание: это, как правило, медленнее добавить тег-тип в селектор, особенно когда вы выбираете идентификаторы, поскольку это уже очень быстрый метод выбора элементов.

Answer 2

Любой код, который полагается на отклик getJSON, должен быть отправлен или вызван обратным вызовом getJSON.

Это для обратного вызова.

Следует отметить, что ваша функция my_change не будет иметь доступ к переменной someVar, поскольку она является локальной для обратного вызова ready().

Чтобы исправить это, переместите функцию my_change внутри обратного вызова ready().

или просто передайте функцию непосредственно my_change.

my_change(function() { 
    console.log('second' + someVar); 
}); 

И есть getJSON обратного вызова функции.

function my_change(func) { 

    $.getJSON("photos/change_product", {json_stuff}, function(data) { 
     var options = []; 
     for (var i = 0; i < data.length; i++) { 
      options.push('<option value="' + data[i].id + '">' + data[i].label + '</option>'); 
     } 
     $("select#size").trigger('change'); 
     $("select#options").html(options.join('')).trigger('change'); 

     func(); 
    }); 
} 

Answer 3

Существует несколько способов сделать это.

Вы можете использовать jQuery $.when и вызвать console.log после завершения ответа ajax.

$(document).ready(function() { 

    var someVar = ''; 

    $("select#size").bind('change', function() { 
     someVar = $(this).val(); 
     console.log('first'); 
    }); 

    $.when(my_change()).then(function(){ 
      console.log('second' + someVar); 
    }); 
}); 

function my_change() { 

    return $.getJSON("photos/change_product", {json_stuff}, function(data) { 
     var options = []; 
     for (var i = 0; i < data.length; i++) { 
      options.push('<option value="' + data[i].id + '">' + data[i].label + '</option>'); 
     } 
     $("select#size").trigger('change'); 
     $("select#options").html(options.join('')).trigger('change'); 
    }) 
}; 

}; 

Или вы можете добавить аргумент обратного вызова к функции my_change(callback).

$(document).ready(function() { 

    var someVar = ''; 

    $("select#size").bind('change', function() { 
     someVar = $(this).val(); 
     console.log('first'); 
    }); 

    my_change(function(){ console.log('second' + someVar) }); 

}); 

function my_change(callback) { 

    return $.getJSON("photos/change_product", {json_stuff}, function(data) { 
     var options = []; 
     for (var i = 0; i < data.length; i++) { 
      options.push('<option value="' + data[i].id + '">' + data[i].label + '</option>'); 
     } 
     $("select#size").trigger('change'); 
     if(typeof callback !== 'undefined' && typeof callback === 'function') 
      callback(); 
     $("select#options").html(options.join('')).trigger('change'); 
    }) 
}; 

};