отложить выполнение скрипта jquery

Как задержать выполнение скрипта до загрузки jQuery

Бездумная гонка за показателями Google PageSpeed часто приводит к поломке некоторых динамических элементов на jQuery. Покажу один из частых примеров и способ, как все это можно быстро починить.

Чаще всего ломаются разные слайдеры, карусели, аккордеоны и прочая динамическая мишура. Связано это с тем, что Google PageSpeed рекомендует устранять ресурсы, блокирующие отображение страницы.

«Устраните ресурсы, блокирующие отображение»
Некоторые ресурсы блокируют первую отрисовку страницы. Рекомендуем встроить критическую часть данных JS/CSS в код HTML и отложить загрузку остальных ресурсов.

Поэтому, если в Autoptimize или каком-то другом оптимизационном плагине Вордпресс включить перенос загрузки JS-скриптов в конец страницы, все инлайн инициализации jQuery будут происходить до загрузки самой библиотеки jQuery. И, естественно, работать не будут.

Есть несколько вариантов решения этой проблемы.

Можно собрать все инлайн скрипты в один и загружать после загрузки библиотеки. Некоторые плагины позволяют даже делать это автоматически, но не всегда корректно. Можно добавить в исключение и принудительно загружать все библиотеки в начале. Но Google PageSpeed за это не добавит очков.

Все это умеет тот же Autoptimize, например

Autoptimize: Опции JavaScript

DOMContentLoaded

Напомню, событие DOMContentLoaded происходит когда весь HTML был полностью загружен и пройден парсером, не дожидаясь окончания загрузки таблиц стилей, изображений и фреймов.

Делаю сайты на Вордпресс с 2008 года, занимаюсь их оптимизацией, беру на поддержку, делюсь опытом в блоге и соцсетях (ссылки ниже, подпишитесь)

Источник

Таймеры JavaScript: все что нужно знать

Здравствуйте, коллеги. Давным-давно на Хабре уже переводилась статья под авторством Джона Резига как раз на эту тему. Прошло уж 10 лет, а тема по-прежнему требует разъяснений. Поэтому предлагаем интересующимся почитать статью Самера Буны, в которой дается не только теоретический обзор таймеров в JavaScript (в контексте Node.js), но и задачи на них.

Несколько недель назад я опубликовал в Твиттере следующий вопрос с одного собеседования:

«Где находится исходный код функций setTimeout и setInterval? Где бы вы его искали? Погуглить нельзя :)»

***Ответьте на него для себя, а потом читайте дальше ***

Кому-то может показаться, что это просто плохой вопрос с собеседования – какой вообще прок знать подобное?! Я, как JavaScript-разработчик, думаю так: предполагается, что вы должны это знать, поскольку обратное может свидетельствовать, что вы не вполне понимаете, как V8 (и другие виртуальные машины) взаимодействует с браузерами и Node.

Рассмотрим несколько примеров и решим парочку задач на таймеры, давайте?

Для запуска примеров из этой статьи можно воспользоваться командой node. Большинство рассмотренных здесь примеров фигурируют в моем курсе Getting Started with Node.js на Pluralsight.

Отложенное выполнение функции

Таймеры – это функции высшего порядка, при помощи которых можно откладывать или повторять выполнение других функций (таймер получает такую функцию в качестве первого аргумента).

Вот пример отложенного выполнения:

В этом примере при помощи setTimeout вывод приветственного сообщения откладывается на 4 секунды. Второй аргумент setTimeout — это задержка (в мс). Я умножаю 4 на 1000, чтобы получилось 4 секунды.

Первый аргумент setTimeout – функция, выполнение которой будет откладываться.
Если выполнить файл example1.js командой node, Node приостановится на 4 секунды, а затем выведет приветственное сообщение (после чего последует выход).

При выполнении example2.js командой node фраза “Node.js rocks” будет выведена на экран через 2 секунды.

Задача на таймеры #1

В вашем решении можно определить всего одну функцию, содержащую встроенные функции. Это означает, что множество вызовов setTimeout должны будут использовать одну и ту же функцию.

Вот как я бы решил эту задачу:

У меня theOneFunc получает аргумент delay и использует значение данного аргумента delay в сообщении, выводимом на экран. Таким образом, функция может выводить разные сообщения в зависимости от того, какое значение задержки мы ей сообщим.

Выполнив файл solution1.js командой node, мы выведем на экран требования задачи, причем, первое сообщение появится через 4 секунды, а второе — через 8 секунд.

Повторяем выполнение функции

Вот пример setInterval :

Поскольку при вызове функции таймера назначается действие, это действие также можно отменить, прежде, чем он будет выполнен.

Функция setImmediate поддерживается не во всех браузерах. Не используйте ее в клиентском коде.

Задержка таймера – вещь не гарантированная

Вы заметили, что в предыдущем примере при выполнении операции с setTimeout после 0 мс эта операция происходит не сразу же (после setTimeout ), а только после того, как будет целиком выполнен весь код скрипта (в том числе, вызов clearTimeout )?

Разумеется, на практике так делать очень плохо, но данный пример помогает понять, что задержка setTimeout – это не гарантированное, а, скорее, минимальное значение. Величина 500 мс означает, что задержка продлится минимум 500 мс. На самом деле, скрипту потребуется гораздо больше времени для вывода приветственной строки на экран. Сначала ему придется дождаться, пока завершится блокирующий цикл.

Задача на таймеры #2

Напишите скрипт, который будет выводить сообщение “Hello World” раз в секунду, но всего 5 раз. После 5 итераций скрипт должен вывести сообщение “Done”, после чего процесс Node завершится.

Подсказка: нужен счетчик.

Вот как я бы решил эту задачу:

«Кто» именно вызывает отложенные функции?

При использовании ключевого слова JavaScript this внутри обычной функции, вот так например:

Давайте определим функцию как свойство объекта, чтобы стало немного понятнее:

Теперь, когда при работе с функцией obj.whoCallMe мы будем напрямую использовать ссылку на нее, в качестве вызывающей стороны будет выступать объект obj (идентифицируемый по своему id ):

Кто в данном случае вызывающий?

Ответ будет отличаться в зависимости от того, где выполняется функция таймера. В данном случае просто недопустима зависимость от того, кто — вызывающая сторона. Вы утратите контроль над вызывающей стороной, поскольку именно от реализации таймера будет зависеть, кто в данном случае вызывает вашу функцию. Если протестировать этот код в Node REPL, то вызывающей стороной окажется объект Timeout :

Обратите внимание: это важно лишь в случае, когда ключевое слово JavaScript this используется внутри обычных функций. При использовании стрелочных функций вызывающая сторона вас вообще не должна беспокоить.

Задача на таймеры #3

Напишите скрипт, который будет непрерывно выводить сообщение “Hello World” с варьирующимися задержками. Начните с односекундной задержки, после чего на каждой итерации увеличивайте ее на секунду. На второй итерации задержка будет 2 секунды. На третьей — три, и так далее.

Включите задержку в выводимое сообщение. У вас должен получиться примерно такой вывод:

Hello World. 1
Hello World. 2
Hello World. 3
.

Ограничения: переменные можно определять только при помощи const. При помощи let или var — нельзя.

Поскольку длительность задержки в данной задаче – величина переменная, использовать setInterval здесь нельзя, но можно вручную настроить интервальное выполнение при помощи setTimeout внутри рекурсивного вызова. Первая выполненная функция с setTimeout будет создавать следующий таймер, и так далее.

Вот как можно было бы решить эту задачу:

Задача на таймеры #4

Напишите скрипт, который будет выводить сообщение “Hello World” с такой же структурой задержек, как и в задаче #3, но на этот раз группами по 5 сообщений, а в группах будет основной интервал задержки. Для первой группы из 5 сообщений выбираем исходную задержку в 100 мс, для следующей – 200 мс, для третьей – 300 мс и так далее.

Вот как должен работать этот скрипт:

Включите задержку в выводимое сообщение. У вас должен получиться примерно такой вывод (без комментариев):

Hello World. 100 // При 100 мс
Hello World. 100 // При 200 мс
Hello World. 100 // При 300 мс
Hello World. 100 // При 400 мс
Hello World. 100 // При 500 мс
Hello World. 200 // При 700 мс
Hello World. 200 // При 900 мс
Hello World. 200 // При 1100 мс
.

Источник

Примеры jQuery-функции setTimeout()

Простой пример setTimeout

Чтобы продемонстрировать действие этой функции, предлагаю взглянуть на следующее демо, в котором всплывающее окно появляется спустя две секунды после клика по кнопке.

Синтаксис

В документации MDN приведен следующий синтаксис для setTimeout :

setTimeout vs window.setTimeout

Примеры использования

setTimeout принимает ссылки на функцию в качестве первого аргумента.

Это может быть название функции:

Переменная, которая обращается к функции:

Или же анонимная функция:

Но я не рекомендую так делать по следующим причинам:

Передаем параметры в setTimout

Альтернативный метод

Опираясь на предыдущий пример, мы получаем:

Сопутствующие проблемы и “this”

Чтобы избавиться от этой нестыковки, можно воспользоваться несколькими методами:

Принудительно установить значение this

Использовать библиотеку

Отключение таймера

Давайте посмотрим на нее в действии. В следующем примере, если кликнуть по кнопке « Start countdown », начнется обратный отсчет. После того, как он завершится, котята получат свое. Но если нажать кнопку « Stop countdown », таймер JavaScript timeout будет остановлен и сброшен.

Подведем итоги

setTimeout – асинхронная функция, а это значит, что полученное обращение к этой функции попадает в очередь, и будет исполнено только после того, как завершатся все остальные действия в стеке. Она не может работать одновременно с другими функциями или отдельным потоком:

К примеру, если вы хотите затемнить изображение на секунду, сделать его видимым на 5 секунд, а затем снова затемнить на 1 секунду, то придется сделать следующее:

Все же лучше использовать JavaScript timeout для чего-то другого.

В завершение

Источник

jQuery: ожидание / задержка 1 секунда без выполнения кода

Я использую цикл while, чтобы ждать, пока неконтролируемое изменяющееся значение не будет больше или равно другому, и я не могу найти способ приостановить выполнение в течение X секунд.

8 ответов

$.задержка используется для задержки анимации в очереди, а не для остановки выполнения.

вместо использования цикла while вам нужно рекурсивно вызвать метод, который выполняет проверку каждую секунду с помощью setTimeout :

вы также можете просто отложить некоторую операцию таким образом:

JavaScript setTimeout очень хорошее решение:

на delay функция в jQuery в основном используется для задержки анимации в очереди анимации jQuery.

в jQuery!—2—> функция предназначена для использования с эффектами и очередей эффект, см. delay docs и пример в нем:

если вы хотите наблюдать переменную для изменений, вы можете сделать что-то вроде

delay() не останавливает поток кода, а затем повторно запускает его. В JavaScript нет практического способа сделать это. Все должно быть сделано с функциями, которые принимают вызовы, такие как setTimeout которых уже упоминалось.

только javascript будет работать без jQuery

Javascript-это асинхронный язык программирования, поэтому вы не можете остановить выполнение в течение некоторого времени; единственный способ [псевдо]остановить выполнение-использовать setTimeout (), который не является задержкой, а «задержкой обратного вызова функции».

ES6 в функции setTimeout

Edit: 204586560000 ms-приблизительное время между исходным вопросом и этим ответом. если я правильно рассчитал.

Источник

Планирование: setTimeout и setInterval

Мы можем вызвать функцию не в данный момент, а позже, через заданный интервал времени. Это называется «планирование вызова».

Для этого существуют два метода:

Эти методы не являются частью спецификации JavaScript. Но большинство сред выполнения JS-кода имеют внутренний планировщик и предоставляют доступ к этим методам. В частности, они поддерживаются во всех браузерах и Node.js.

setTimeout

Например, данный код вызывает sayHi() спустя одну секунду:

Если первый аргумент является строкой, то JavaScript создаст из неё функцию.

Это также будет работать:

Но использование строк не рекомендуется. Вместо этого используйте функции. Например, так:

Начинающие разработчики иногда ошибаются, добавляя скобки () после функции:

Отмена через clearTimeout

Синтаксис для отмены:

В коде ниже планируем вызов функции и затем отменяем его (просто передумали). В результате ничего не происходит:

Повторюсь, что нет единой спецификации на эти методы, поэтому такое поведение является нормальным.

Для браузеров таймеры описаны в разделе таймеров стандарта HTML5.

setInterval

Метод setInterval имеет такой же синтаксис как setTimeout :

Все аргументы имеют такое же значение. Но отличие этого метода от setTimeout в том, что функция запускается не один раз, а периодически через указанный интервал времени.

Следующий пример выводит сообщение каждые 2 секунды. Через 5 секунд вывод прекращается:

Так что если вы запустите код выше и подождёте с закрытием alert несколько секунд, то следующий alert будет показан сразу, как только вы закроете предыдущий. Интервал времени между сообщениями alert будет короче, чем 2 секунды.

Рекурсивный setTimeout

Есть два способа запускать что-то регулярно.

Например, необходимо написать сервис, который отправляет запрос для получения данных на сервер каждые 5 секунд, но если сервер перегружен, то необходимо увеличить интервал запросов до 10, 20, 40 секунд… Вот псевдокод:

А если функции, которые мы планируем, ресурсоёмкие и требуют времени, то мы можем измерить время, затраченное на выполнение, и спланировать следующий вызов раньше или позже.

Сравним два фрагмента кода. Первый использует setInterval :

Второй использует рекурсивный setTimeout :

Для setInterval внутренний планировщик будет выполнять func(i) каждые 100 мс:

Реальная задержка между вызовами func с помощью setInterval меньше, чем указано в коде!

Вполне возможно, что выполнение func будет дольше, чем мы ожидали, и займёт более 100 мс.

В данном случае движок ждёт окончания выполнения func и затем проверяет планировщик и, если время истекло, немедленно запускает его снова.

Ниже представлено изображение, показывающее процесс работы рекурсивного setTimeout :

Рекурсивный setTimeout гарантирует фиксированную задержку (здесь 100 мс).

Это потому, что новый вызов планируется в конце предыдущего.

Есть и побочный эффект. Функция ссылается на внешнее лексическое окружение, поэтому пока она существует, внешние переменные существуют тоже. Они могут занимать больше памяти, чем сама функция. Поэтому, если регулярный вызов функции больше не нужен, то лучше отменить его, даже если функция очень маленькая.

setTimeout с нулевой задержкой

Это планирует вызов func настолько быстро, насколько это возможно. Но планировщик будет вызывать функцию только после завершения выполнения текущего кода.

Так вызов функции будет запланирован сразу после выполнения текущего кода.

Например, этот код выводит «Привет» и затем сразу «Мир»:

Первая строка помещает вызов в «календарь» через 0 мс. Но планировщик проверит «календарь» только после того, как текущий код завершится. Поэтому «Привет» выводится первым, а «Мир» – после него.

Есть и более продвинутые случаи использования нулевой задержки в браузерах, которые мы рассмотрим в главе Событийный цикл: микрозадачи и макрозадачи.

В браузере есть ограничение на то, как часто внутренние счётчики могут выполняться. В стандарте HTML5 говорится: «после пяти вложенных таймеров интервал должен составлять не менее четырёх миллисекунд.».

Аналогичное происходит при использовании setInterval вместо setTimeout : setInterval(f) запускает f несколько раз с нулевой задержкой, а затем с задержкой 4+ мс.

Это ограничение существует давно, многие скрипты полагаются на него, поэтому оно сохраняется по историческим причинам.

Этого ограничения нет в серверном JavaScript. Там есть и другие способы планирования асинхронных задач. Например, setImmediate для Node.js. Так что это ограничение относится только к браузерам.

Итого

Обратим внимание, что все методы планирования не гарантируют точную задержку.

Например, таймер в браузере может замедляться по многим причинам:

Всё это может увеличивать минимальный интервал срабатывания таймера (и минимальную задержку) до 300 или даже 1000 мс в зависимости от браузера и настроек производительности ОС.

Задачи

Вывод каждую секунду

Сделайте два варианта решения.

Источник