Как узнать, что какая-то функция вызвана/запущена?

Question

[Анатолий]

Есть функция func1, которая должна как-то проверять статус функции func2. Как это сделать?
func1 запускается первой, и косвенно участвует в запуске func2.

Схема:
func1 --> Черный ящик --> func2

function func1() {
if func2 запущена, то..
}

function func2() {
func1 меня вызвали!
}

Нужна не проверка, а какое-то прослушивание.

Answer 1

[Антон Спирин]

Если надо следить за вызовами функции, то можно использовать декоратор:

function decorator(f) {
  return function() {
    f.apply(this, arguments);
    console.log(f.name + ' is called!');
  }
}

function foo() {
  console.log('I am foo!');
}

const bar = decorator(foo);

bar();  // I am foo! \n foo is called!

Если нужен флаг, то можно использовать свойства функции:

function foo() {
  foo.isRunning = true;
  // do something
}

function bar() {
  if (!foo.isRunning) {
    return foo();
  }
  // do something other
}

Comments

[Анатолий]

Можно как-то разжевать? ))
Про проверку по таймеру я знаю, а что за декоратор? За счет чего организовано прослушивание? Функция в цикле?

[Антон Спирин]

Анатолий, просто обертка над функцией. Вызывается обертка, она выполняет функцию и любые действия перед вызовом и после.

[RAX7]

Анатолий, https://learn.javascript.ru/decorators

[Анатолий]

Почитал про декораторы, но не совсем понял как мне это использовать.
Насколько я понял, декоратор (функция) грубо говоря сам вызывает функцию, а у меня это не так.
У меня функция1 вызывает некий черный ящик, который вызывает функцию2, и как тут применить декоратор я не совсем понял.

[Антон Спирин]

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

[Анатолий]

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

[Антон Спирин]

Анатолий, и в чем проблема-то? Что не получается? Исходя из вопроса вам нужно просто проверять флаг. Либо вы неправильно сформулировали вопрос, либо сами толком не понимаете чего хотите. Так же не ясно, что вы подразумеваете под "прослушиванием".

[Анатолий]

нужно просто проверять флаг

все верно, вопрос был как организовать прослушивание этого события.
Сейчас по таймеру проверяю, но я не особой специалист в javascript, поэтому и спросил, возможно что-то не знаю, а я много чего не знаю :)

[Антон Спирин]

Анатолий, какого события и для чего его вам его прослушивать?

[Анатолий]

Антон Спирин,
1) события - флага от func2
2) потому что func1 находится в приостановленном варианте, пока не получит флаг от func2

[RAX7]

Анатолий, может пример в песочницу зальете, а то не понятно что за черные ящики у вас там и что за "приостановленный вариант func1"

[Анатолий]

RAX7, пишу плеер для ютуба, могу весь плеер залить, я его сейчас пишу, поэтому там не все рабочее.

Вот весь плеер: https://codepen.io/workcode/pen/gZLWWg
Меня интересует прослушивание когда у ютуба будет состояние ready, это строки: 279-300

можете по критиковать код :)
В инспекторе ошибка:

Uncaught TypeError: this[PlayersYT[i]].getPlayerState is not a function
at playPause (YouTube-ver3.html:558)
at onPlayerReady (YouTube-ver3.html:415)
at M.h.G (www-widgetapi.js:48)
at Y.h.o (www-widgetapi.js:92)
at Y.h.H (www-widgetapi.js:106)
at Wa.g (www-widgetapi.js:81)
at Oa.f (www-widgetapi.js:70)

Говорит, что this[PlayersYT[i]].getPlayerState не функция, бред какой-то.
А так вроде работает.

[Антон Спирин]

Анатолий, очень плохой подход к реализации, навскидку не очень понятно, что в вашем коде вообще происходит. По-хорошему подобное пишется с использованием ООП.

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

// Replace the 'ytplayer' element with an <iframe> and
  // YouTube player after the API code downloads.
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
      height: '360',
      width: '640',
      videoId: 'M7lc1UVf-VE'
    });
  }

Ваша идея с checkYouTubePlayerAPIReady бессмысленна. Плеер сам вызовет onYouTubePlayerAPIReady и там можно разместить любой код.

[Анатолий]

не спорю, а как передать параметры?

[Антон Спирин]

Анатолий, вы скажите для чего вы вообще этот проигрыватель пишите? Ваш код нечитаемый даже с комментариями, не масштабируемый и не поддерживаемый. Но опускать руки не стоит, думаю, каждый начинающий разработчик в свое время написал что-то подобное.
Я бы вам рекомендовал для начала получше изучить JavaScript и посмотреть как спроектированы чужие решения на github.

Простые примеры
https://github.com/feross/yt-player
https://github.com/dominictarr/youtube-player
https://github.com/gajus/youtube-player

что-то посложней вроде https://github.com/sampotts/plyr

[Анатолий]

plyr лучшее, что я нашел, но для моих задач не годится, например у меня реализована ленивая загрузка, и ютуб плеер грузит трафика 50-100Кб, в зависимости от размера постера, а тот же plyr в 10 раз больше, так как нет ленивой загрузки

пишу сам не от желания писать, а потому что не нашел достойного решения, отвечающего моим требованиям

у меня хоть код и примитивный, но зато функциональный, и что значит не масштабируемый?

[Антон Спирин]

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

у меня хоть код и примитивный, но зато функциональный, и что значит не масштабируемый?

Вы через месяц сами в этой каше не разберетесь. Под "не масштабируемый" я подразумевал, что вы свой код скорей всего поломаете нежели внесете в него серьезные изменения. По хорошему ваш модуль должен позволять создавать экземпляр обертки с публичным интерфейсом, но у вас просто набор из функций, обращений к DOM и API проигрывателя.
Вы с возможностями API Youtube разобраться не можете, но уже уверены что чужие решения вам не подходят. Ленивую загрузку реализовать довольно просто. Сейчас это стандарт для любого сервиса.

[Анатолий]

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

я не программист и не стараюсь им быть, есть задача, я решаю

Ленивую загрузку реализовать довольно просто.

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

[Анатолий]

Вот нашел скрипт на просторах Интернета, я думаю хотел увидеть, что-то типа такого:

window.videoApiLoaded = [];
window.videoApiLoaded.youtube = false;

function loadYoutubeVideo(videoId) {

    window.onYouTubeIframeAPIReady = function() { document.dispatchEvent(new CustomEvent('onYouTubeIframeAPIReady', {})) };

    if(window.videoApiLoaded.youtube == false) {
        var tag = document.createElement('script');
        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
        window.videoApiLoaded.youtube = true;
    }

    var player;

    document.addEventListener('onYouTubeIframeAPIReady', function (e) {
        player = new YT.Player('player', {
          height: '400',
          width: '600',
          videoId: videoId,
          events: {
            'onStateChange': onYtStateChange
          }
        });

    }, false);

}

[Антон Спирин]

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

[Анатолий]

Я не говорю, что это хорошая идея, просто случайно увидел код.
Я искал что-то подобное, но думал, что выглядеть будет поэлегантнее.

Напишите правильное решение, приму за ответ и покончим с вопросом.

[Антон Спирин]

Анатолий, ну главное, чтобы код вашу задачу решал.

[Анатолий]

Задача у меня и так решалась по timeout, но я не силен в JS, поэтому и спросил тут, может есть что-то типа event для функции.

[Антон Спирин]

Анатолий, для решения этой задачи не нужен event)
Вместо кода:

function foo() {
  document.dispatchEvent(new CustomEvent('fooEvent', {}))
}

document.addEventListener('fooEvent', function() {
  someAction();
}, false);

Можно просто написать:

function foo() {
  someAction();
}

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

[Анатолий]

Все верно, за исключением того, что foo() вызываю не я, а сторонний скрипт.
Я ее могу лишь описать someAction(), но не вызвать.

[Антон Спирин]

Анатолий, нет никакой разницы кто вызывает foo(), оба варианта приведут к одному и тому же результату - по вызову foo() выполнится someAction().

[Анатолий]

К сожалению, мы друг друга не понимаем.

[Антон Спирин]

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

[Анатолий]

Подумал и решил, что для моего случая нужно полностью отказаться от проверки состояния функции onYouTubePlayerAPIReady.
Во первых я так понял, запуск функции onYouTubePlayerAPIReady происходит сразу при загрузке скрипта https://www.youtube.com/player_api. Т.е. в моем случае, когда клиент дойдет до видео и кликнет на него, скрипт точно загрузится. Размер API, тем более всего 923 байта.
Во вторых декоратор это тоже не мой случай, потому как onYouTubePlayerAPIReady вызывается 1 раз при загрузке API, а мне нужно много раз и только при клике по видео.

Answer 2

[Анатолий]

Вопрос закрываю, так как я так понял, что решения - нет,
кроме как по timeout, т.е. самозапуск функции с интервалом по времени.
Если, решение есть, пишите отмечу решением.

Answer 3

[Алексей Уколов]

Если код полностью синхронный:

var flag = false;

function func1() {
  if (Math.random() > 0.5) {
    func2();
  }

  if (flag) {

  }
}

function func2() {
  flag = true;
}

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

Answer 4

[Rsa97]

ЕМНИП, JavaScript - однопоточный, с очередью выполнения для событий. Значит две функции не могут быть вызваны одновременно.