JavaScript: дождитесь события onclick от пользователя (который сравнивает 2 фото), сделав паузу внутри пользовательской функции сравнения для стандартного массива JS. Сортировка?
Мне нужно расположить 8 изображений в порядке предпочтений пользователя. Для попарного сравнения пользователю предоставляются 2 изображения: одно в первом теге, второе - во втором теге. Я хочу поместить номера всех изображений в массив. Затем запустите стандартную функцию JS sort для этого массива. В качестве аргумента функции сортировки предоставьте функцию, которая возвращает 1, если пользователю нравится левое изображение, и -1, если пользователю больше нравится второе изображение. Эта функция загрузит изображение с номером A в первый тег и изображение с номером B во второй тег (числа A и B будут переданы в функцию сравнения из функции сортировки). Для каждого из двух тегов я могу определить функцию обработчика события onClick, которая будет срабатывать, когда пользователь выбирает изображение, загруженное в этот тег.
Как мне организовать код, чтобы он работал? Должен ли я использовать какую-то хитрую комбинацию setTimeout с обратными вызовами (или обещаниями)?
<body>
<img id = 'img1' src = '1.png' onclick="clickImg(1)">
<img id = 'img2' src = '2.png' onclick="cliclImg(2)">
</body>
<script>
let compared = 0;
function clickImg(img_number){
if (img_number == 1)
compared = 1;
else
compared = -1;
}
function compare(n1,n2){
document.getElementById('img1').src = '' + n1 + '.png';
document.getElementById('img2').src = '' + n2 + '.png';
// Here I should wait for a user click on one of the images
result = compared;
compared = 0;
return result;
}
array = [0,1,2,3,4,5,6,7];
array.sort(compare);
</script>