如果元素在视口中停留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);
  }
});