Вызывать функцию только один раз, когда элемент попадает в верхнюю часть окна. - PullRequest
Новая
       20

Вызывать функцию только один раз, когда элемент попадает в верхнюю часть окна.

0 голосов
/ 01 мая 2018

Я пытаюсь вызвать функцию myFunction только один раз, когда один из элементов #checkPosition попадает в верхнюю часть окна, а потому что мне нужно использовать $(window).scroll() для обнаружения действия (прокрутка) и в какой-то момент Значение прокрутки totalScroll всегда больше, чем расстояние этого элемента до вершины indicatorPosition, функция вызывается несколько раз.

Как я могу вызвать эту функцию только один раз?

HTML: 

<div class="section section--1">
    <p>Section 1</p>
</div>
<div class="section section--2">
    <p>Section 2</p>
    <div id="checkPosition" class="indicator">Check position</div>
    <div id="targetElement" class="target">Target: </div>
</div>

CSS (просто чтобы получить некоторую высоту): 

.section {
   min-height: 1000px;
}

JS: 

const indicatorPosition = $('#checkPosition').offset().top;
console.log("indicators initial position:", indicatorPosition);

var myFunction = function(){
  $('#targetElement').append('new text goes here only once. ');
  console.log("call me only once");
}

$(window).scroll(function(){
    var totalScroll = $(window).scrollTop();
    if (totalScroll > indicatorPosition) {
      myFunction();
    }
});

1 Ответ

0 голосов
/ 01 мая 2018

Один из способов сделать это - использовать переменную и увеличивать ее в тот момент, когда вы вызываете функцию, а затем проверить, изменилось ли значение, чтобы увидеть, была ли функция вызвана ранее или нет 

let indicatorPosition = $('#checkPosition').offset().top;
console.log("indicators initial position:", indicatorPosition);

var myFunction = function(){
  $('#targetElement').append('new text goes here only once. ');
  console.log("call me only once");
}
let check = 1
$(window).scroll(function(){
    var totalScroll = $(window).scrollTop();
    if (totalScroll > indicatorPosition) {
      if(check === 1){
      myFunction();
      check++
      }    
    }
});
.section {
   min-height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section section--1">
    <p>Section 1</p>
</div>
<div class="section section--2">
    <p>Section 2</p>
    <div id="checkPosition" class="indicator">Check position</div>
    <div id="targetElement" class="target">Target: </div>
</div>
...