Как обойти данную «загвоздку» синтаксиса?

Question

[Urukhayy]

Мне надо чтобы в success выводило все числа, которые проходит id, но там только 11. Как решить эту проблему?

for(var id = 1; id != 10; id++)
{
	$.ajax({
		type: "POST",
		data: {Id: id},
		url: "getname.php",
		dataType: "json",
		success: function(data){	
			alert(id); // всегда 11, а надо чтобы было (1,2,3,4...10)
		}
	})
	alert(id); // как надо (1,2,3,4...10)
}

Answer 1

[Никита Гусаков]

var createSuccessHandler = function (i) {
    return function (data) {
        alert(i);
    };  
};
for(var id = 1; id != 10; id++)
{
    $.ajax({
        type: "POST",
        data: {Id: id},
        url: "getname.php",
        dataType: "json",
        success: createSuccessHandler(i)
    })
}

По мотивам habrahabr.ru/company/mailru/blog/233553/, 6 пункт

Comments

[Urukhayy]

Это самый оптимальный способ?

[Сергей Протько]

@Urukhayy да

[Urukhayy]

Заметил странность, цифры идут не по порядку, а как-то в разброс: 3,5,7,2,10 и т.д.
С чем это связано?

[Никита Гусаков]

@Urukhayy по моему тебе нужно в принципе пересмотреть свои знания о JS и вебе в целом. JS - асинхронный, а запросы выполняются с разной скоростью

Answer 2

[Сергей Протько]

async: false, но лучше так не делать.

Вообще разберитесь может почему так выходит? МОжет потом вы поймете что это никакого отношения к синтаксису не имеет... Что функции в succsess отрабатывают когда цикл уже обошли давно... И лучше делать тогда уж так:

var ids = []
for(var id = 1; id < 10; id++) {
    ids.push(id);
}

ids.forEach(function (id) {
    // по скольку ссылка на нужный id будет сохранена всегда, пока живо замыкание
    // все будет ок.
    $.ajax({
		type: "POST",
		data: {Id: id},
		url: "getname.php",
		dataType: "json",
		success: function(data){	
			alert(id);
		}
	})
}

Что бы лучше понять эту "странность" почитайте про то, как работает js. В частности про event loop

Comments

[Сергей Протько]

@grafika с чего вы взяли? по условию автора вопроса цикл будет идти до 9 и стопнется.

[Сергей Протько]

@grafika вопрос уж точно не об этом. Посему я этот момент опускаю, ибо ну зачем вообще думать и гадать? Может описка, может действительно хотел. А вот предмет вопроса мне ясен, его я и обрисовал.

[Urukhayy]

Это самый оптимальный способ?

[Сергей Протько]

@Urukhayy запереть значение в замыкание - да. Вариант @hell0w0rd чище. Только сделайте отдолжение - разберитесь что там происходит и почему. В будущем массу вопросов устранит.

[Urukhayy]

@Fesor Но мне какой вариант использовать? Ваш или hell0w0rd?

[Сергей Протько]

@Urukhayy работать будут они одинаково. Если хотите что бы все работало синхронно - я в своем ответе указал вам ссылку на доку по jquery и название опции. Тогда и ваш вариант будет работать.

Answer 3

[Родион Мещеряков]

Проблема в том, что аякс-запрос - асинхронная функция и цикл for просто не ждет ее выполнения. В итоге запрос выполняется с последним значением переменной.

Вот так можно попробовать:

for (var id = 1; id < 11; id++) { 
  (function (id) {
    $.post('getname.php', {Id: id}, function() {	
      alert(id);
    }, 'json');
  })(id)
}

Comments

[Никита Гусаков]

точно! вот так красивее можно написать)

[Родион Мещеряков]

Это по мотивам обсуждения еще одного хорошего поста на Хабре. )