Question

嘿所以我是一个菜鸟，但我想知道下面的剧本是不是太激了？如果是这样，有人可以帮我优化吗？

<script>
jQuery(function() { 

  jQuery(window).scroll(function() {
    if((jQuery(".main-content").height() - jQuery(window).scrollTop()) < 702) {
      jQuery("h1.product-single__title, .product-single__title.h1").addClass('titleScroll');
      jQuery("#ProductPhotoImg").addClass('imgScroll');
      jQuery("div#option_total").addClass('optionScroll');
      jQuery(".template-product .product-form__item--submit, .template-product .product-form__item--quantity").addClass('addScroll');
    }
    else {
      jQuery("h1.product-single__title, .product-single__title.h1").removeClass('titleScroll');
      jQuery("#ProductPhotoImg").removeClass('imgScroll');
      jQuery("div#option_total").removeClass('optionScroll');
      jQuery(".template-product .product-form__item--submit, .template-product .product-form__item--quantity").removeClass('addScroll');
    }
  });

});
</script>

由于

Answer 1

来自https://dannyvankooten.com/delay-scroll-handlers-javascript/

var timer;

$(window).scroll(function() {
    if(timer) {
        window.clearTimeout(timer);
    }

    timer = window.setTimeout(function() {
        // actual callback
        console.log( "Firing!" );
    }, 100);
});

Answer 2

您正在寻找的是“限制”。通过限制一个函数，它只能被触发每秒x次，你可以在其中定义x。有很多方法可以解决这个问题，而且很多库都提供这种功能。你可以在CSS-tricks上找到一个很好的阅读，它集中在lodash实现上。

另一种保存效果的好方法是使用requestAnimationFrame()（MDN）。这样您就不必收听滚动事件，但可以告诉浏览器在下一次重绘上执行一些脚本。您可以像这样使用它：

function doThis(){
   // javascript you'd like to trigger

   window.requestAnimationFrame(doThis); // call again to create a 'loop'
}

window.requestAnimationFrame(doThis); // initial call to get the 'loop' started

脚本太火了？

2 个答案: