0

Доброго времени суток.
Есть страница, HTML, к ней подключил 3 javascript файла:

<head>
	<title>Test</title>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/1file.js" defer></script>
	<script type="text/javascript" src="js/2file.js" defer></script>
	<script type="text/javascript" src="js/3file.js" defer></script>
	
</head>

Проблема в том, что js файлы загружаются и выполняются одновременно.
А мне нужно, что бы они строго последовательно выполнялись, т.к иначе они мешают друг другу, и нарушают работу.
Я конечно мог бы вставить .setTimeout() но поскольку в скриптах я использую jquery и подключаюсь к сайту, все зависит от пинга и компьютера. А т.е определенное значение пауз я задать не могу.
Как мне сделать, что бы следующий скрипт не начинал загружаться, пока не выполнится предыдущий?

3
  • Что подразумеваете под этим: 'что бы следующий скрипт не начинал загружаться, пока не выполнится предыдущий' - это значит пока он не загрузиться или все же пока не выполнится? Commented 25 июл. 2016 в 16:11
  • да, мне нужно что бы они выполнялись по очереди, не верно сформулировал.
    – Black_Dog
    Commented 25 июл. 2016 в 16:18
  • не понятен вопрос. На данный момент у вас в коде у скриптов стоит defer, из-за чего они и грузятся хаотично (хотя выполняться должны последовательно). Уберите этот аттрибут и скрипты будут загружаться и выполняться строго последовательно. По-умолчанию скрипты (как и все другие файлы) обрабатываются именно так.. Commented 26 июл. 2016 в 7:30

2 ответа 2

3

Используйте defer (подробнее):

<script src="1.js" defer></script>
<script src="2.js" defer></script>
7
  • пробовал - не помогло =(
    – Black_Dog
    Commented 25 июл. 2016 в 15:55
  • @Black_Dog если эти файлы используют jQuery, то они могут загрузиться раньше её и соответственно работать не станут.
    – edem
    Commented 25 июл. 2016 в 16:02
  • т.е проблема не решаема?
    – Black_Dog
    Commented 25 июл. 2016 в 16:04
  • А что вы jQuery defer не проставили? Commented 25 июл. 2016 в 16:09
  • @AleksanderK. не видел смысла его к библиотеке ставить, поставил - не помогло..
    – Black_Dog
    Commented 25 июл. 2016 в 16:19
0

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

//1.js
function s1(onComptele) {
  //... <-- ваш код
  onComplete(); // когда все закончили вызовем
}

//2.js
function s2(onComptele) {
  //... <-- ваш код
  onComplete(); // когда все закончили вызовем
}

//3.js
function s3(onComptele) {
  //... <-- ваш код
  onComplete(); // когда все закончили вызовем
}

//app.js - объеденяет все содержимое
s1(function() {
  s2(function() {
    s3();
  });
});

Также можете посмотреть в сторону Promise, они избавят вас от callback hell и выглядеть будет так:

s1().then(function() {
  return s2();
)).then(function() {
  return s3();
));

Для этого нужно использовать такой подход:

//n.js
function sN() {
  return new Promise(function(resolve, reject) {
    // ... <- ваш код
    resolve(); // когда все выполнится
    // или reject(error) - если хотите показать что была ошибка
  });
}

Но не забудьте что для поддержки промисов всеми браузерами придется использовать библиотеку-полифил% promise-polyfill или ES6-Promise.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.