Как дождаться выполнения функции?
После java асинхронность в js это беда для меня. Суть проблемы: написать функцию, которая проверяет наличие файла, если есть, то true , нет — false . Казалось бы все просто, но не тут то было. Использовал deprecated функцию. И наплодил много кода с ее использованием. Теперь нужно сделать так, чтобы эта же функция работала так же, но была реализована по другому. Теперь у меня код в if выполняется как false , не дожидаясь верного ответа от doesFileExist(urlToFile); Подскажите пзл, как сюда можно прикрутить ноги? С $.when у меня не получается ничего (
function doesFileExist(urlToFile) < $.ajax(< url: urlToFile, type: 'HEAD', error: function () < console.log(false) return false; >, success: function () < console.log(true) return true; >>); > if(doesFileExist(url))<>
старый вариант
function doesFileExist(urlToFile) < var xhr = new XMLHttpRequest(); xhr.open('HEAD', urlToFile, false); xhr.send(); if (xhr.status == "404") < return false; >else < return true; >>
Отслеживать
1,318 7 7 серебряных знаков 20 20 бронзовых знаков
задан 14 ноя 2016 в 22:22
helloWorld helloWorld
1,045 3 3 золотых знака 8 8 серебряных знаков 21 21 бронзовый знак
Как ждать выполнения функции?
У меня есть функция GetUserStat() ,которая выполняет некоторые операции с БД и запросами на сервер.В основной программе мне нужно получить это значение и после этого идти дальше.Но как остановиться и ждать выполнения функции GetUserStat()?
Понял,что нужно как то использовать async и await.Но как?Примеры везде замудрённые,а мне надо подождать выполнения всего 1 функции
- Вопрос задан более трёх лет назад
- 6767 просмотров
3 комментария
Простой 3 комментария
Функция wait() в JavaScript: как заставить ваш код ждать?
JavaScript — это язык программирования, который позволяет создавать интерактивные веб-сайты. Одна из особенностей JavaScript — это возможность ожидания перед выполнением кода. Эта функция может быть полезна, когда необходимо отложить выполнение кода до тех пор, пока не будет выполнено конкретное условие.
В этой статье мы расскажем вам о функции wait() и о том, как максимально эффективно использовать ее в веб-проектах. Мы также рассмотрим несколько альтернатив, которые можно использовать на ваших веб-сайтах.
Что такое функции wait() в JavaScript?
Функция wait() — это встроенная функция JavaScript, которая приостанавливает выполнение программы на указанное время.
Синтаксис функции wait() следующий:
Функция wait() принимает один параметр — количество миллисекунд ожидания перед выполнением кода. Например, код ниже будет приостановлен на 1 секунду:
Функция wait() может быть полезна, если перед запуском кода, вы вы решите проверить, истинно ли условие или насколько корректна введена форма перед отправкой.
Выполнение функции wait()
Важно понимать, как именно функция wait() работает по отношению к остальной части вашего кода. Функция wait() — это блокирующая функция — это означает, что она будет блокировать выполнение кода, следующего за ней.
Например, рассмотрим следующий код:
В этом коде первое сообщение будет напечатано сразу, второе через 1 секунду. Это произойдет потому, что функция wait() заблокирует выполнение кода, следующего за ней. Код после функции wait() будет выполняться только по истечении указанного времени.
Использование функции wait() с API
Давайте рассмотрим пример использования функции wait() с API. Предположим, вы работаете над проектом, который включает в себя взаимодействие с API, у которого ограничение скорости — 10 запросов в секунду. Если вам необходимо убедиться, что не превысите установленный лимит скорости, вы можете использовать функцию wait().
Ваш код может выглядеть так:
// Make an API request
wait(100); // Wait for 1/10th of a second
С помощью этого кода будет выполняться 100 запросов API. Мы используем функцию wait(), чтобы убедиться, что в течение 1 секунды не выполняется более 10 запросов.
Альтернативы функции wait()
Есть несколько альтернатив функции wait(), которые также могут подойти для вашего веб-проекта.
Функция setTimeout()
Одной из альтернатив является функция setTimeout(). Это встроенная функция JavaScript, которая выполняет фрагмент кода после указанной задержки.
Синтаксис функции setTimeout() следующий:
Функция setTimeout() принимает два параметра. Первый параметр — это функция, которую нужно выполнить. Второй параметр — это задержка в миллисекундах перед выполнением функции.
Например, следующий код вызовет функцию myFunction() через 1 секунду:
Функция setTimeout() похожа на функцию wait(), но имеет несколько ключевых отличий:
- Функция setTimeout() не блокирует — это означает, что код после функции будет выполняться немедленно, вне зависимости от задержки.
- Функция setTimeout() возвращает значение, которое можно использовать для отмены таймера. Это полезно, если вы хотите остановить выполнение кода до того, как истечет задержка.
Функция setInterval()
Другой альтернативой является функция setInterval(). Это еще одна встроенная функция JavaScript, которая вызывает функцию или выполняет фрагмент кода с заданными интервалами.
Синтаксис функции setInterval() следующий:
Функция setInterval() также принимает два параметра. Первый параметр — это функция, которую нужно выполнить. Второй параметр — это задержка в миллисекундах перед выполнением функции.
Например, следующий код будет вызывать функцию myFunction() каждую 1 секунду:
Как и setTimeout(), функция setInterval() также не блокирует. Она возвращает значение, которое можно использовать для отмены таймера. Отличие в том, что функция setInterval() будет продолжать вызывать функцию с заданными интервалами до тех пор, пока она не будет специально остановлена.
Какую функцию использовать?
Выбор подходящей функции зависит от вашего проекта. Если вам нужно только приостановить программу на определенное время, то функция wait() — это лучший выбор. Если вам нужно вызвать функцию через заданное время, лучше всего использовать функцию setTimeout(). Но если вам необходимо вызывать функцию через равные промежутки времени — мы рекомендуем использовать функцию setInterval().
Так что, если вы только начинаете работать с JavaScript или ищете лучший способ справиться с ожиданием загрузки страниц, любая из этих функций может быть для вас полезной.
Что такое callback-функция в JavaScript?
Простыми словами: коллбэк — это функция, которая должна быть выполнена после того, как другая функция завершила выполнение (отсюда и название: callback — функция обратного вызова).
Чуть сложнее: В JavaScript функции — это объекты. Поэтому функции могут принимать другие функции в качестве аргументов, а также возвращать функции в качестве результата. Функции, которые это умеют, называются функциями высшего порядка. А любая функция, которая передается как аргумент, называется callback-функцией.
Зачем нужны коллбэки?
По одной простой причине: JavaScript — это событийно-ориентированный язык. Поэтому вместо того, чтобы ждать ответа для дальнейшего выполнения программы, JavaScript продолжит выполнение, одновременно ожидая других событий. Давайте разберем простой пример:
const first = () => console.log(1); >; const second = () => console.log(2); >; first(); second(); Как вы и ожидаете, функция first выполнится первой, а функция second уже после нее. Поэтому в консоли будет выведен следующий результат:
Пока что все понятно. Но что, если функция first содержит некий код, который не может выполниться немедленно? К примеру, работа с API, где мы отправляем запрос и должны ждать ответа. Чтобы смоделировать такую ситуацию, мы используем функцию setTimeout , которая вызывает функцию после заданного временного промежутка. Мы отсрочим выполнение функции на 500 миллисекунд, как будто бы это запрос к некому API. Теперь код будет выглядеть так:
const first = () => // Как будто бы запрос к API setTimeout(() => console.log(1); >, 500 ); >; const second = () => console.log(2); >; first(); second(); Неважно, понимаете ли вы сейчас, как работает setTimeout() . Основная идея — теперь мы отложили исполнение команды console.log(1) на 500 миллисекунд. И что теперь выведет наша программа?
Хотя мы по-прежнему вызываем функцию first первой, ее вывод появился вторым, после вывода функции second . Но JavaScript не нарушает порядок вызова функций, он просто не дожидается ответа от функции first , а сразу двигается дальше — к функции second .
Поэтому нельзя просто вызывать функции в нужном порядке и надеяться, что они в любом случае выполнятся в том же порядке. Коллбэки же позволяют нам быть уверенными в том, что определенный код не начнет исполнение до того момента, пока другой код не завершит исполнение.
Фронтенд-разработчик — с нуля до трудоустройства за 10 месяцев
- Постоянная поддержка от наставника и учебного центра
- Помощь с трудоустройством
- Готовое портфолио к концу обучения
- Практика с первого урока
Вы получите именно те инструменты и навыки, которые позволят вам найти работу
Создаем коллбэк
Во-первых, откройте консоль разработчика в Google Chrome (Windows: Ctrl + Shift + J)(Mac: Cmd + Option + J), либо свой IDE, либо просто Repl.it , и введите в консоли следующую функцию:
const doHomework = (subject) => alert(`Starting my $subject> homework.`); >; Мы создали функцию doHomework . Наша функция принимает одну переменную — название предмета, которым мы будем заниматься. Вызовите функцию, набрав следующий текст в консоли:
doHomework('math'); // Выводит алерт: Starting my math homework. Теперь давайте добавим в определение функции еще один параметр, это и будет наш коллбэк. Затем вызовем ее, определив функцию-callback в качестве аргумента:
const doHomework = (subject, callback) => alert(`Starting my $subject> homework.`); callback(); >; doHomework('math', () => alert('Finished my homework'); >); Если вы введете этот код в консоли, вы получите два алерта один за другим, в первом будет сообщение о том, что выполнение домашнего задания началось (Starting my math homework.), а во втором — что вы закончили выполнять задание (Finished my homework).
Однако коллбэки не обязательно должны быть определены при вызове функции. Они могут быть определены и в другом месте кода, например, так:
const doHomework = (subject, callback) => alert(`Starting my $subject> homework.`); callback(); >; const alertFinished = () => alert('Finished my homework'); >; doHomework('math', alertFinished); Таким образом, результат выполнения этого кода такой же, как и в предыдущем примере, однако сам код немного другой. Как вы видите, мы передали функцию alertFinished как аргумент в функцию doHomework при ее вызове.
Перепишем пример вызова функции с setTimeout для последовательного выполнения функций:
const first = (callback) => // Как будто бы запрос к API setTimeout(() => console.log(1); callback(); >, 500 ); >; const second = () => console.log(2); >; first(second); // 1 // 2 Пример из реальной жизни
На прошлой неделе я опубликовал статью «Создаем бота для Твиттера в 38 строк кода» . Этот код работает благодаря API Твиттера. И когда мы делаем запрос к API, мы должны дождаться ответа до того, как начнем выполнять с этим ответом какие-то действия. Это прекрасный пример того, как в реальной жизни выглядит коллбэк. Вот как выглядит сам запрос:
T.get('search/tweets', params, (err, data, response) => if (!err) // Происходит какая-то магия > else console.log(err); > >); T.get просто значит, что мы выполняем get запрос к API Твиттера. В запросе три параметра: ‘search/tweets’ – это адрес (роут) запроса, params – наши параметры поиска и в конце передается анонимная функция-callback.
Коллбэк здесь нужен, потому что нам нужно дождаться ответа от сервера до того, как приступим к дальнейшему выполнению кода. Мы не знаем, успешным будет наш запрос или нет, поэтому после отправки параметров поиска на search/tweets через get-запрос, мы просто ждем. Как только Твиттер ответит, выполнится наша callback-функция. Твиттер отправит нам в качестве ответа или объект err (error – ошибка), или объект response. В коллбэке мы можем через if() проверить, был ли запрос успешным или нет, и затем действовать соответственно.
Профессия «Фронтенд-разработчик»
- Изучите востребованные JavaScript и TypeScript
- Научитесь создавать пользовательские интерфейсы сайтов и приложений
- Освойте самый популярный фреймворк JavaScript — React
- Познакомьтесь с языками веб-разработки HTML и CSS