From 55ddd4454665a3c66e3d5b186bc79048468d36e7 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Mon, 15 Mar 2021 14:29:50 +0300 Subject: Auto fixes --- .../timing_element_visibility/index.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) (limited to 'files/ru/web/api/intersection_observer_api/timing_element_visibility') diff --git a/files/ru/web/api/intersection_observer_api/timing_element_visibility/index.html b/files/ru/web/api/intersection_observer_api/timing_element_visibility/index.html index c509ce33f1..6bfdc973f7 100644 --- a/files/ru/web/api/intersection_observer_api/timing_element_visibility/index.html +++ b/files/ru/web/api/intersection_observer_api/timing_element_visibility/index.html @@ -210,7 +210,7 @@ let refreshIntervalID = 0;
adObserver
Содержит экземпляр {{domxref("IntersectionObserver")}}, используемый для вычисления наложения рекламных блоков и границ элемента <main>.
refreshIntervalID
-
Переменная для хранения ID интервала, который возвращается функцией {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}}. Этот интервал будет использоваться для запуска переодических обновлений рекламных блоков.
+
Переменная для хранения ID интервала, который возвращается функцией {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}}. Этот интервал будет использоваться для запуска периодических обновлений рекламных блоков.

Установка

@@ -276,7 +276,7 @@ function startup() {

Для остановки таймеров нам нужно удалить ссылки на рекламные блоки из коллекции visibleAds и пометить их как неактивные. Чтобы это сделать, мы начинаем с сохранения ссылок на текущие видимые элементы в переменную previouslyVisibleAds. Это нужно, чтобы в дальнейшем можно было восстановить счётчики для этих блоков. Так мы указываем приложению, что эту рекламу не надо считать активной. Затем, если пользователь вернулся в документ, мы вызываем функцию  updateAdTimer() для каждого отложенного элемента. Эта функция обновляет общее время видимости элемента. После этого мы присваиваем переменной dataset.lastViewStarted значение 0, что означает, что таймер не запущен.

-

Если документ стал видимым, мы выполняем обратный процесс: сначала мы проходим через коллекцию previouslyVisibleAds. Для каждого элемента мы присваиваем  dataset.lastViewStarted значение, соответствующее текущему времени документа (в миллисекундах с момента создания документа). Это время можно узнать с помощью  метода {{domxref("Performance.now", "performance.now()")}}. Затем мы присваиваем переменной  visibleAds закешированное ранее значение previouslyVisibleAds, с обнулением последней переменной. Теперь рекламные блоки перезапущены и настроены, так что время простоя не будет учиваться.

+

Если документ стал видимым, мы выполняем обратный процесс: сначала мы проходим через коллекцию previouslyVisibleAds. Для каждого элемента мы присваиваем  dataset.lastViewStarted значение, соответствующее текущему времени документа (в миллисекундах с момента создания документа). Это время можно узнать с помощью  метода {{domxref("Performance.now", "performance.now()")}}. Затем мы присваиваем переменной  visibleAds закешированное ранее значение previouslyVisibleAds, с обнулением последней переменной. Теперь рекламные блоки перезапущены и настроены, так что время простоя не будет учитываться.

Обработчик изменений наложения

@@ -302,7 +302,7 @@ function startup() {

Как мы упоминали ранее, функция обратного вызова {{domxref("IntersectionObserver")}}  получает на вход массив элементов, которые активировали наблюдателя. В нашей функции мы итерируемся по этому массиву. Если элемент пересекается с корневым элементом, мы знаем, что он стал видимым. Если он становится видимым более, чем на 75%, мы считаем, что реклама видима и мы запускаем таймер, выставляя значение  dataset.lastViewStarted равным времени изменения параметра перекрытия {{domxref("IntersectionObserverEntry.time", "entry.time")}}. Затем мы добавляем рекламный блок в набор visibleAds.

-

Если рекламный блок уходит из зоны видимости, мы удаляем его из набор видимых элементов. Затем, в зависимости от значения {{domxref("IntersectionObserverEntry.intersectionRatio", "entry.ratio")}}, мы либо меняем рекламу, либо ставим на паузу. Так, если значение равно 0.0 и реклама уже была видна минимум минуту, мы вызываем функцию replaceAd() . В этом случае пользоватль видит разные рекламные блоки, но сама реклама меняется незаметно для пользователя.

+

Если рекламный блок уходит из зоны видимости, мы удаляем его из набор видимых элементов. Затем, в зависимости от значения {{domxref("IntersectionObserverEntry.intersectionRatio", "entry.ratio")}}, мы либо меняем рекламу, либо ставим на паузу. Так, если значение равно 0.0 и реклама уже была видна минимум минуту, мы вызываем функцию replaceAd() . В этом случае пользователь видит разные рекламные блоки, но сама реклама меняется незаметно для пользователя.

Обработка периодический событий

@@ -365,9 +365,9 @@ function startup() {

Функция начинается с выяснения времени, когда происходила последняя проверка видимости рекламы (adBox.dataset.lastViewStarted). Мы также получаем текущее время с момента создания документа с помощью {{domxref("Performance.now", "performance.now()")}} currentTime.

-

Если время последней проверки lastStarted не равно нулю - это значит, что таймер сейчас уже запущен. В этом случае мы вычисляем разницу между текущим временем и временем старта проверки. Это значение покажет, сколько реклама была видима с момента последнего старта детекции. Затем это значение прибавляем к уже имееющемуся totalViewTime. Обратите внимание не вызов {{jsxref("parseFloat()")}}: так как все значения из Dataset - строки, JavaScript пытается соединить строки вместо того, чтобы просуммировать числа.

+

Если время последней проверки lastStarted не равно нулю - это значит, что таймер сейчас уже запущен. В этом случае мы вычисляем разницу между текущим временем и временем старта проверки. Это значение покажет, сколько реклама была видима с момента последнего старта детекции. Затем это значение прибавляем к уже имеющемуся totalViewTime. Обратите внимание не вызов {{jsxref("parseFloat()")}}: так как все значения из Dataset - строки, JavaScript пытается соединить строки вместо того, чтобы просуммировать числа.

-

В конце мы присваеваем lastViewStarted текущее значение. Это делается вне зависимости от того, был ли элемент видим во время вызова функции или нет - это позволяет таймеру рекламных блоков срабатывать всегда, когда эта функция вызывается. Это имеет смысл, потому что вызов может сработать ровно в тот момент, когда реклама только появилась.

+

В конце мы присваиваем lastViewStarted текущее значение. Это делается вне зависимости от того, был ли элемент видим во время вызова функции или нет - это позволяет таймеру рекламных блоков срабатывать всегда, когда эта функция вызывается. Это имеет смысл, потому что вызов может сработать ровно в тот момент, когда реклама только появилась.

Показываем таймер рекламы

@@ -525,7 +525,7 @@ function buildContents() {

Если никакое значение не указано для replaceBox, мы создаем новый элемент. Создаётся новый контейнер {{HTMLElement("div")}}. Его CSS-параметры задаются с помощью класса "ad". Затем создаются заголовок рекламного блока, его текст и таймер.  Соотстветвенно, это {{HTMLElement("h2")}}, {{HTMLElement("p")}} и {{HTMLElement("div")}}. Эти элементы применяются к контейнеру adBox.

-

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

+

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

Наступаем время присвоить data-параметры, чтобы отслеживать видимость рекламных блоков с помощью установки adBox.dataset.totalViewTime и adBox.dataset.lastViewStarted равными нулю.

@@ -553,7 +553,7 @@ function buildContents() {

Результат

-

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

+

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

{{EmbedLiveSample("fullpage_example", 750, 800)}}

-- cgit v1.2.3-54-g00ecf