Javascript(Jquery). Как в цикле дождаться выполнения функции(клика)?

Question

[TechNOIR]

Добрый день. Имеется скрипт, который запрашивает данные из php, выводит на html страницу 3 кнопкокартинки и по клику на одну из них выдает ссылку на эту картинку.
В одной итерации это срабатывает хорошо.
После добавления цикла как и ожидалось цикл проходит весь и выводит кучу картинок, но надо чтобы выдавал по очереди...
Тоесть g =3 прогнал, выдал картинки и ждет клика.
Клик произошел, плюсует g и возвращается вначало..
Как это сделать? Спасибо заранее!!

var g = 2;
while (g < 4) {
function set_mode_view(element){
$("#test_value").append(element.firstChild.currentSrc);
flag = true;
}
				
$(document).ready(function(){
$.get("getex.php?", { i: g})

	.done(function(data) {
	console.log(data);
			  $.ajax({
			  type: 'POST',
			  url: 'im.php',
            dataType: 'json',
            cache: false,
			  success: function(result) {

				$("#test_value").append('<style>img {height: 100px; width: 100px;}</style><button onclick="set_mode_view(this)"><img src="'+result.url1+'" alt="Кнопка «button»"></button><button onclick="set_mode_view(this)"><img src="'+result.url2+'" alt="Кнопка «button»"></button><button onclick="set_mode_view(this)"><img src="'+result.url3+'" alt="Кнопка «button»"></button>');
			  },
			  });
	});

});
g++;
}

Answer 1

[Coder321]

Делаете клик промисом, оборачиваете цикл async функцией вызываете нужную функцию через await.

async function loop() {
    for (let i = 0; i < 3; i++) {
        await click();
    }
}

function click() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('Click async')
            return resolve();
        }, 2000)
    });
}

Comments

[TechNOIR]

Спасибо большое!!! А можно маленькую просьбу..хотябы примерно не покажете на моем коде?..а то постигаю еще Js..Спасибо!!

[Coder321]

Просто переделайте set_mode_view через промис.
Только учтите что async/await без babel работает не везде.

Answer 2

[profesor08]

Сделай массив промисов и вызови Promise.all, тем самым код сработает тогда, когда все промисы будут выполнены.

let promises = [];

for (let i = 0; i < 4; i++) {
    let promise = fetch("getex.php?i=" + i);
    promises.push(promise);
}

Promise.all(promises).then(values => { 
  values.forEach(function(response) {
  	response.json().then(function(json) {
    	console.log(json);
    });
  });
});