Невозможно получить функцию onScroll для запуска только один раз

Question

Я довольно новичок в JavaScript и обнаружил, что я немного застрял в одной, казалось бы, очень простой задаче с функцией onScroll.

У меня есть следующий код (см. Ниже), который отлично работает. Тем не менее, он в настоящее время срабатывает каждый раз, когда пользователь прокручивается вверх или вниз, возвращаясь к этому конкретному вертикальному местоположению на странице. Я только хочу, чтобы он срабатывал при первом прокрутке страницы после загрузки страницы.

Пожалуйста, помогите!

Большое уважение и большое спасибо!

$(window).scroll(function() { 
    $('#pro1').each(function() { 
    var topOfWindow = $(window).scrollTop(), 
    bottomOfWindow = topOfWindow + $(window).height(); 

    var imagePos = $(this).offset().top; 

    if(imagePos < bottomOfWindow-200 && imagePos >= topOfWindow-500){ 
     $(this).addClass('bigEntrance2'); 
    }else{ 
     $(this).removeClass('bigEntrance2'); 
    } 
    }); 
}); 

Answer 1

Ну, вы можете использовать переменную и использовать ее в качестве флага. В первый раз, когда пользователь прокручивается после загрузки страницы, вы устанавливаете ее в true. После этого вы проверяете эту переменную, чтобы избежать того же кода.

var alreadyScrolled = false; 
$(window).scroll(function() { 
    if(!alreadyScrolled) { 
      $('#pro1').each(function() { 
       var topOfWindow = $(window).scrollTop(), 
       bottomOfWindow = topOfWindow + $(window).height(); 

       var imagePos = $(this).offset().top; 

       if(imagePos < bottomOfWindow-200 && imagePos >= topOfWindow-500){ 
        $(this).addClass('bigEntrance2'); 
       }else{ 
        $(this).removeClass('bigEntrance2'); 
       } 
      }); 
      alreadyScrolled = true; 
    } 
}); 

Answer 2

Вы можете использовать метод one. Это то же самое, что и метод on, но срабатывает только один раз на загрузку страницы. Так что для вашего примера это будет выглядеть так:

$(window).one("scroll", function() 
{ 
    # Scroll code here 
}); 

Редактировать: Думаю, я лучше понимаю ваш вопрос. Вы хотите, чтобы код проверялся, когда вы находитесь в этой области прокрутки, но выполняете только один раз. Таким образом, чтобы сделать это, вы должны сначала назначить пользовательское событие:

$(window).one("customEvent", function() 
{ 
    $(this).addClass('bigEntrance2'); 
}); 

А потом вызвать это событие, когда вы хотите:

if(imagePos < bottomOfWindow-200 && imagePos >= topOfWindow-500) 
{ 
    $(this).trigger("customEvent"); 
} 

Таким образом, класс «bigEntrance2» применяется только один раз, что это то, что я думаю, вы хотите.