Question

使用Waypoint和Inview shortcut，如果元素在X时间内（例如5秒）处于视图中，而不是立即在{{1}上触发，我怎么能够仅触发处理函数事件？

enter

注意：此问题来自其他人，通过问题跟踪器询问。我在这里复制了它，因为这是一个很好的问题。

Answer 1

这个问题有两个答案，一个是具体的，一个是一般的。我将从将军开始。

任何时候你想要查看某些条件是否适用于你需要寻找的X时间：

标志条件成立的事件。
标记条件变为假的事件。

当条件成立时，您使用setTimeout启动计时器，该计时器将在给定时间过后触发您想要的操作。当条件变为false时，使用clearTimeout清除计时器。如果清除事件在计时器结束并且原始事件已触发后触发，则清除无效。

此模式的一个常见用途是鼠标事件。当用户将鼠标悬停在元素上一段时间时，我们有时会想要触发某些内容。在下一个示例中，“成为真实”事件将为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作为真假事件。

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); } });

如果元素在视口中持续X个时间，我该如何触发函数？

2 个答案: