劇本太火了？

-1

嘿所以我是一個noob，但我想知道下面的腳本是不是太火了？如果是這樣，有人可以幫我優化它嗎？劇本太火了？

<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>

感謝

來源

2016-12-02 Smokersky

嘗試lodash或下劃線'節流閥'。 http://underscorejs.org/#throttle – Ben

Underscore是一個很好的圖書館。我喜歡油門。 –

除了jquery以外，OP還沒有要求庫解決方案。如果要爲一個功能創建一個新的庫，這將是一個很大的開銷。 –

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

來源

2016-12-02 09:34:04

你要尋找的被稱爲「節流」。通過限制一個函數，它只能每秒觸發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

來源

2016-12-02 09:42:59 LuudJacobs

劇本太火了？

回答

相關問題