如何使此函数在滚动窗口/文档的10%处触发？

Question

当下面的函数达到页面的10%时，它会触发函数doSomething，但当您继续滚动时，它会继续触发。我如何让它以10%的速度发射一次，然后停止发射？

万事如意，

乔伊

  $(document).scroll(function(e){

      // grab the scroll amount and the window height
      var scrollAmount = $(window).scrollTop();
      var documentHeight = $(document).height();

      // calculate the percentage the user has scrolled down the page
      var scrollPercent = (scrollAmount / documentHeight) * 100;

      if(scrollPercent = 10) {
          // run a function called doSomething
          doSomething();
      }

      function doSomething() { 
            $(".fill").append('<img src="img/arrow-down.png"/>');

          // do something when a user gets 10% of the way down my page
      }

  });

Answer 1

根据浏览器的不同，scroll事件可能会触发很多次。最好使用计时器。

尝试以下操作：

var  didScroll = false;
var doneAction = false;

$(window).scroll(function() {
    didScroll = true;
});

setInterval(function() {
    if ( didScroll ) {
      didScroll = false;

      // grab the scroll amount and the window height
      var scrollAmount = $(window).scrollTop();
      var documentHeight = $(document).height();

      // calculate the percentage the user has scrolled down the page
      var scrollPercent = (scrollAmount / documentHeight) * 100;

      if(scrollPercent >= 10 && !doneAction) {
          alert('You just scrolled to 10 percent.'); // or whatever action you want to perform
          doneaction = true;
      }
    }
}, 250);

我希望这能帮到你。