防止JS觸發不止一次，除非窗口調整大小

Question

我對我們網站上的一些圖像元素有一個過渡，並且除了當您向上滾動網站時他們再次啓動時，它們都能正常工作。這些應該只在您向下滾動網站或調整窗口時觸發。

當前JS：

var $animation_elements = jQuery('.animation-element'); 
var $window = jQuery(window); 

function check_if_in_view() { 
    var window_height = $window.height(); 
    var window_top_position = $window.scrollTop(); 
    var window_bottom_position = (window_top_position + window_height); 

    jQuery.each($animation_elements, function() { 
    var $element = jQuery(this); 
    var element_height = $element.outerHeight(); 
    var element_top_position = $element.offset().top; 
    var element_bottom_position = (element_top_position + element_height); 

    //check to see if this current container is within viewport 
    if ((element_bottom_position >= window_top_position) && 
     (element_top_position <= window_bottom_position)) { 
     $element.addClass('in-view'); 
    } else { 
     $element.removeClass('in-view'); 
    } 
    }); 
} 

$window.on('scroll resize', check_if_in_view); 
$window.trigger('scroll'); 

是否有辦法防止這種射擊兩次或一次，除非窗口大小？

Answer 1

您是否嘗試過只觸發resize事件？

$(document).ready(function(){ 
var $animation_elements = jQuery('.animation-element'); 
var $window = jQuery(window); 
//Initialize classes 
jQuery.each($animation_elements, function(index, element) { 
    jQuery(element).addClass('in-view'); 
}); 
function check_if_in_view() { 
    var window_height = $window.height(); 
    var window_top_position = $window.scrollTop(); 
    var window_bottom_position = (window_top_position + window_height); 

    jQuery.each($animation_elements, function() { 
    var $element = jQuery(this); 
    var element_height = $element.outerHeight(); 
    var element_top_position = $element.offset().top; 
    var element_bottom_position = (element_top_position + element_height); 

    //check to see if this current container is within viewport 
    if ((element_bottom_position >= window_top_position) && 
     (element_top_position <= window_bottom_position)) { 
     $element.addClass('in-view'); 
    } else { 
     $element.removeClass('in-view'); 
    } 
    }); 
} 

$window.on('resize', check_if_in_view); 
check_if_in_view(); 
});