如果元素在視口中停留X倍的時間，如何觸發函數？

Question

使用Waypoints和Inview快捷方式 ，如果某個元素在視圖中停留了X倍的時間（例如5秒），而不是立即在enter事件上觸發，我怎么可能僅觸發處理程序函數？

new Waypoint.Inview({
  element:document.getElementById('target'),
  enter: function(direction) {
    // Only do this if in view for 5 seconds
  }
});

注意：此問題來自其他人，通過問題跟蹤器提出。 我已經在這里復制了它，因為這是一個很好的問題。

Answer 1

這個問題有兩個答案，一個是具體的，一個是一般的。 我將從將軍開始。

任何時候您想要查看X時間內是否滿足某些條件時，都需要尋找：

1. 標記條件變為真的事件。
2. 標記條件變為假的事件。

當條件變為真時，您可以使用setTimeout啟動計時器，該計時器將在給定時間過去后觸發所需的操作。 當條件變為假時，您可以使用clearTimeout清除計時器。 如果清除事件恰好在計時器經過后觸發並且原始事件已觸發，則清除無效。

此模式最常見的用途之一是鼠標事件。 當用戶將鼠標懸停在元素上X倍的時間時，有時我們想觸發一些東西。 在下一個示例中，“ becoming true”事件將為mouseenter 。 “成為假”事件將為mouseleave 。 當用戶將鼠標懸停在元素上五秒鍾時，我們將在此處登錄控制台。

var timer;

$('#something')
  .on('mouseenter', function() {
    timer = window.setTimeout(function() {
      console.log('Hovered for 5 seconds');
    }, 5000);
  })
  .on('mouseleave', function() {
    window.clearTimeout(timer);
  });

具體答案：您可以將這種模式用於JavaScript中的所有此類問題，並且Inview事件沒有什么不同。 在這種情況下，我們將使用enter和exit作為true和false事件。

var timer;

Waypoint.Inview({
  element: $('#something')[0],
  enter: function() {
    timer = window.setTimeout(function() {
      console.log('In view for 5 seconds');
    }
  },
  exit: function() {
    window.clearTimeout(timer);
  }
});

Answer 2

對於這種問題，通常在enter時啟動計時器，在exit停止計時器。

例：

var timerId;
new Waypoint.Inview({
  element: document.getElementById('target'),
  enter: function(direction) {
    timerId = setTimeout(function() {
      // Only do this if in view for 5 seconds
    }, 5000);
  },
  exit: function(direction) {
    clearTimeout(timerId);
  }
});