[英]How can I trigger a function if an element is in the viewport for X amount of time?
Using Waypoints and the Inview shortcut , how might I be able to only trigger the handler function if an element is in view for X amount of time, say 5 seconds, rather than trigger immediately on the enter
event? 使用Waypoints和Inview快捷方式 ,如果某个元素在视图中停留了X倍的时间(例如5秒),而不是立即在
enter
事件上触发,我怎么可能仅触发处理程序函数?
new Waypoint.Inview({
element:document.getElementById('target'),
enter: function(direction) {
// Only do this if in view for 5 seconds
}
});
Note: This question comes from somebody else, asked through the issue tracker. 注意:此问题来自其他人,通过问题跟踪器提出。 I've copied it here because it's a good question.
我已经在这里复制了它,因为这是一个很好的问题。
This question has two answers, one specific and one general. 这个问题有两个答案,一个是具体的,一个是一般的。 I'll start with the general.
我将从将军开始。
Any time you want to see if some condition is true for X amount of time you will need to look for: 任何时候您想要查看X时间内是否满足某些条件时,都需要寻找:
When the condition becomes true, you start a timer using setTimeout that will trigger the action you desire after the given time has elapsed. 当条件变为真时,您可以使用setTimeout启动计时器,该计时器将在给定时间过去后触发所需的操作。 When the condition becomes false, you clear the timer using clearTimeout .
当条件变为假时,您可以使用clearTimeout清除计时器。 If the clearing event happens to fire after the timer has elapsed and the original event has fired, clearing has no effect.
如果清除事件恰好在计时器经过后触发并且原始事件已触发,则清除无效。
One of the more common uses of this pattern is with mouse events. 此模式最常见的用途之一是鼠标事件。 We sometimes want to trigger something when a user has been hovering over an element for X amount of time.
当用户将鼠标悬停在元素上X倍的时间时,有时我们想触发一些东西。 In this next example the "becoming true" event will be
mouseenter
. 在下一个示例中,“ becoming true”事件将为
mouseenter
。 The "becoming false" event will be mouseleave
. “成为假”事件将为
mouseleave
。 Here we'll log to the console when the user has hovered over an element for five seconds. 当用户将鼠标悬停在元素上五秒钟时,我们将在此处登录控制台。
var timer;
$('#something')
.on('mouseenter', function() {
timer = window.setTimeout(function() {
console.log('Hovered for 5 seconds');
}, 5000);
})
.on('mouseleave', function() {
window.clearTimeout(timer);
});
The specific answer: You can use this pattern for any of these class of problems in JavaScript, and the Inview events are no different. 具体答案:您可以将这种模式用于JavaScript中的所有此类问题,并且Inview事件没有什么不同。 In this case we'll use
enter
and exit
as the true and false events respectively. 在这种情况下,我们将使用
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);
}
});
For this kind of problem, generally, one starts a timer on enter
and stop the timer on exit
. 对于这种问题,通常在
enter
时启动计时器,在exit
停止计时器。
example: 例:
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);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.