Как правильно построить очередность выполнения кода?

Question

[zeni1agent]

У меня есть три файла js
<div class="image"><img src="fg.jpg"></div>
1

$('.image').load(function(){
  alert ('2'); 
 });

2
alert ('1');
3

$('document').ready(function(){
alert ('3'); 
});

Все они расположены в таком порядке а очередность выполнения кода выводит alert()
Проблема в том что load() не хочет запускать код без очистки кеша браузера ctrl+shift+r
А также если я поставлю код до тега img
Выводит только если я укажу

$('document').ready(function(){
$('.image').load(function(){
  alert ('2'); 
 });
 });

Но тогда код выполняется дважды и это мне не подходит.
Какую мне поставить очередность выполнения кода что бы они все работали правильно ?

Comments

[Ernest Faizullin]

очередность написания не значит очередность выполнения в js

[Robur]

Вопрос-то в чем? "работали правильно" - это как?

[zeni1agent]

Ernest Faizullin, Я так и написал
очередность выполнения такая alert ('1'); alert ('2'); alert ('3');
А очередность написания вот такая 2 1 3
Я же все написал в вопросе и обозначил цифрами
Проблема в том что .load не хочет запускаться если он не внутри $('document').ready но когда он внутри .ready то код выполняется дважды. и я не знаю как это исправить.

[zeni1agent]

Robur,

Вопрос-то в чем? "работали правильно" - это как?

вопрос в том что

.load не хочет запускаться если он не внутри $('document').ready но когда он внутри .ready то код выполняется дважды.

Answer 1

[zeni1agent]

Я не знаю изо чего .load в jqury вызывается дважды но проблему я смог устранить только когда вместо
.load использовал .onload из js

Answer 2

[Василий Мажекин]

Заверните в промисы и устанавливайте очередность какую пожелаете.

image$ = new Promise((resolve) => {
 $('.image').load(() => {
  alert ('2'); 
  resolve();
 });
});

alert1$ = new Promise(
(resolve) => {
 alert(1); resolve();
})

alert3$ = new Promise....

// желаемую очередность установите тут
image$.then(() => { 
 return alert1$;
}).then(() => {
 return alert3$;
}).then(() => {  });

Comments

[zeni1agent]

Очередность вывода получилась неправильной
alert (1); alert (3); alert (2); по сути Promise никак не повлиял на очередность его выполнения.

[Кирилл Конторович]

zeni1agent, Доки почитайте) Вот пример кода

var p1 = Promise.resolve(3);
var p2 = 1337;
var p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, "foo");
}); 

Promise.all([p1, p2, p3]).then(values => { 
  console.log(values); 
});

//Выведет: 
// [3, 1337, "foo"]

[Василий Мажекин]

zeni1agent, очередность сами меняйте как хотите, в самом низу код
Например так:

alert1$.then(() => { 
 return image$;
}).then(() => {
 return alert3$;
}).then(() => {  })

[Василий Мажекин]

Кирилл Конторович, это некорректный пример кода не путайте человека там нет очередности