清除屏幕插件中的 setInterval 以在视口中更改类

clearing the setInterval in the onScreen plugin to change a class when in viewport

本文关键字：视口 setInterval 屏幕 插件 清除      更新时间：2023-09-26

嗨，我正在使用屏幕插件在元素滚动到视口时更改元素上的类。我想在几秒钟后删除该类，即使该元素在视口中，并且当该元素不在视口中时，该元素不应该像插件的设计方式那样具有该类（我认为）。

因此，当用户滚动到该元素时，应添加该类以显示这是用户正在寻找的元素。然后应该在几秒钟后将其删除，以显示它是页面上的常规内容。

我想我在插件中注意到，当元素在视口中时，setInterval 会不断添加类，所以我试图清除间隔，这样它就不会设置类，但它不起作用。

$( document ).ready( function() {
    $( function() {
        var id = setInterval( function() { ("#link").removeClass("red").filter(":onScreen").addClass("red").delay(2000).queue(function() {
           $(this).removeClass("red");
            });
        }, 1000 );
   });
   function remove() {
      if ( $("#link").hasClass("red") ) {
          setTimeout(function() { clearInterval( id ); }, 3000 )
          $("#link").removeClass("red");
      }
   }
   remove();

当元素在几秒钟后和显示添加的类后在视口中时，请帮助我删除该类。感谢您的帮助。

这是Jsfiddle。

我建议您改用此插件。它有两种方法，您可以使用它们在匹配元素进入或离开视口时对它们执行操作，如下所示：

$('#link').onScreen({
  doIn: function() {
    $(this).addClass('red');
  },
  doOut: function() {
    $(this).removeClass('red');
  }
});
相关文章：