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

2 ответа 2

3

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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