Блог

Главная - Вопросы по программированию - Действие, основанное на видимости и продолжительности элемента в окне просмотра

Действие, основанное на видимости и продолжительности элемента в окне просмотра

#javascript

#javascript

Вопрос:

Я использую IntersectionObserver, чтобы узнать, виден ли конкретный элемент пользователю или нет. Если он виден, то я извлекаю некоторые данные со стороны сервера. Теперь я хотел бы знать, существует ли какой-либо API / подход, чтобы узнать, как долго элемент виден пользователю.

Вариант использования, который я пытаюсь решить, заключается в следующем: если элемент виден в окне просмотра в течение 5 секунд, затем извлеките некоторые данные с сервера.

Заранее спасибо.

Комментарии:

1. Попробуйте в setTimeout течение 5 секунд, когда он начал быть видимым, затем проверьте, виден ли он все еще.

2. @Kosh Вам также нужно будет очистить тайм-аут, если он стал скрытым, в противном случае это позволило бы ему быть видимым, затем скрытым на 3 секунды, затем снова видимым, когда происходит вторая проверка, и все равно запускать API.

3. @DBS, абсолютно согласен.

Ответ №1:

 const scrollArea = document.querySelector('.scroll-area');

let executeApiCall = null;

const observer = new IntersectionObserver( event => {
  console.log(`intersect`, event);

  if ( event[0].intersectionRatio === 0 ) {
    console.log('element not in viewport');
    clearTimeout(executeApiCall);
  } else {
    console.log('element is in viewport');
    if(!executeApiCall) {
      executeApiCall = setTimeout(() => {
        console.log('api call');
      }, 5000);
    }
  }
}, {
  root: scrollArea
});

Смотрите: https://stackblitz.com/edit/intersection-observer-hynpuj

Ответ №2:

If возвращается true после setTimeout выполнения вашего следующего кода…

 let elem = document.getElementById("app");

function isInViewportFunc(el){
    var rect = el.getBoundingClientRect();
    return rect.bottom < 0 || rect.right < 0 || rect.left > window.innerWidth || rect.top < window.innerHeight;
}

console.log(
isInViewportFunc(elem)

) 
 <br/>
<br/><br/>
<br/>
<br/><br/><br/><br/><br/><br/><br/>

<div id="app">Text</div>
Метки: ,