Как выполнить функцию один раз при скролле jquery?

Question

[s0pran0]

Подскажите , мне нужно чтобы при прокрутке страницы воспроизводилось одно событие клика по кнопке, но у меня получается, что она нажимается постоянно при скролле, а надо чтобы один раз.

if ($(this).scrollTop() >= 500) {
$('.departments__button').trigger('click');
} else if ($(this).scrollTop() <= 150) {
$('.departments__button').trigger('click');

Comments

[Пашенька]

Например, использовать переменную-флажок с булевым значением, которая охарактеризует работу, как выполненную.

[Kovalsky]

Первый ответ очень хороший, не поленитесь прочитать и понять о чем речь - https://stackoverflow.com/questions/36415992/debou...

Answer 1

[YavaDev]

Например можно создать переменную, в которой будет хранится булево значение. Эта переменная будет указывать на то, срабатывал ли триггер клика на кнопке.
Это будет выглядеть примерно так

let clickOnButton = true;
$(window).on('scroll', function(){
  if ($(this).scrollTop() >= 500 && clickOnButton){
    $('.departments__button').trigger('click');
    clickOnButton = false;
  }else if ($(this).scrollTop() < 500 && $(this).scrollTop() > 150 ) {
    clickOnButton = true;
  }else if ($(this).scrollTop() <= 150 && clickOnButton) {
    $('.departments__button').trigger('click');
    clickOnButton = false;
  }
})

Comments

[s0pran0]

Спасибо, с вашей помощью получилась отличная анимация сужения банера и раскрытия меню при скролле. Благодарю.

Answer 2

[dollar]

Чтобы любую фунцию запускать лишь один раз, нужно создать внешнюю переменную, где хранить количество запусков функции. Это универсальное решение. В вашем случае достаточно булевой переменной.

var was_used = false;
function myFunc() {
  if (was_used) return;
  was_used = true;
  .................
}

Конечно, это костыльное решение, хоть и универсальное. Так что нужно обязательно добавить такую строчку кода:

//TODO: когда наберусь опыта, нужно провести рефакторинг, оптимизацию.