Как вызвать две функции одновременно

Курсы javascript

У меня есть функция анимации, которая в зависимости от переданных значений в аргументы может творить с блоком что угодно (читай разные вещи). Она похожа на jQuery .animate() по исполнению, но не синтаксису. Что я хочу? Для начала обрисую вид (не целиком, а просто логику).

function anim(el, prop, val, speed) < //something >document.getElementById("button").onclick = function() < //block left:200px anim('block','left','200px',[10,100]); //block opacity:0 anim('block','opacity','0',"fast"); >

Что такое 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

Как запустить параллельно две функции?

Здравствуйте, у меня вопрос про параллельное вычисление (потоки).
Есть функция которая принимает массив и некоторые другие переменные. На выходе возвращает массив.
Мне нужно запустить несколько функций одновременно (желательно 4). Потом по завершении их работы продолжить выполнение основного алгоритма.
Вот возникла проблема. Все время вылитают ошибки или невозможно их синхронизировать. Помогите найти рабочий код, пожалуйста.

P.S. У меня ноутбук, 2 ядра.

Заранее благодарю за ответ.

• Вопрос задан более двух лет назад
• 377 просмотров

10 комментариев

Простой 10 комментариев

Как запустить две и более функции одновременно?

Как мне запустить два бота одновременно и чтобы они работали параллельно друг-другу?

• Вопрос задан более трёх лет назад
• 2109 просмотров

5 комментариев

Простой 5 комментариев

alternativshik @alternativshik
в 2х разных окнах, на 2 разных компах, в 1 файле вписать запуск двух run().
Yevgeni @Yevgeni Автор вопроса
Yevgeni @Yevgeni Автор вопроса
Yevgeni, мне нужно запустить все в одном файле
Yevgeni @Yevgeni Автор вопроса
Yevgeni, т.е в разных потоках

Шамуэй @gordon_shamway
Решения вопроса 1
Сергей Горностаев @sergey-gornostaev Куратор тега Python
Седой и строгий
В отдельных сопрограммах, в отдельных потоках или в отдельных процессах.
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ответы на вопрос 2

Made out of meat.
можно и через asyncio
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать

from threading import Thread thread1 = Thread(target=bot1.run) thread1.start() thread2 = Thread(target=bot2.run) thread2.start()

Но как сказали выше, это только один из возможных путей. Просто он первый пришёл мне в голову.

Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

• Python
• +2 ещё

Python как получить данные из 1С находящейся на удаленном рабочем столе?

• 1 подписчик
• 9 минут назад
• 6 просмотров