Очистить и установить интервал в JQuery с помощью scrollTop

Я хочу установить и очистить интервал, когда я прокручиваю (достигаю) определенных div, однако он не работает с scrollTop.

Он должен очищать/останавливать интервал, когда я прокручиваю вниз до второго div, но он не останавливается и продолжает работать.

JQuery:


function imageSlide() {
    $('#my-image').fadeOut(1000).fadeIn(1000);
  }


$(window).scroll(function() {
    var scroll_top = $(document).scrollTop();
    var fisrt_div_top = $('#first-div').position().top;
    var second_div_top = $('#second-div').position().top;

    if (scroll_top >= fisrt_div_top && scroll_top < second_div_top){
      intervalID = setInterval(imageSlide, 2000);
    }
    if (scroll_top > second_div_top){
        clearInterval(intervalID);
    }
});

javascript jquery setinterval intervals scrolltop

22.12.2020 04:43

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

343

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы устанавливаете интервал более одного раза. Вам нужно убедиться, что вы еще не установили это условие.

 if (scroll_top >= fisrt_div_top && scroll_top < second_div_top){
      intervalID = setInterval(imageSlide, 2000);
    }

Что-то вроде этого.

function imageSlide() {
  console.info('image slide is happening');
}


$(window).scroll(function() {
  var scroll_top = $(document).scrollTop();
  var fisrt_div_top = $('#first-div').position().top;
  var second_div_top = $('#second-div').position().top;

  if (
    scroll_top >= fisrt_div_top &&
    scroll_top < second_div_top &&
    window.intervalID === undefined
  ){
    window.intervalID = setInterval(imageSlide, 2000);
  }
  if (scroll_top > second_div_top){
    clearInterval(window.intervalID);
  }
});

html {
  overflow-y: scroll; /* Show vertical scrollbar */
  overflow-x: scroll; /* Show horizontal scrollbar */
  height: 9000px !important;
  width: 9000px !important;
}

#first-div {
  position: absolute;
  top: 100px;
  height: 100px;
  border: 1px black solid;
}

#second-div {
  position: absolute;
  top: 300px;
  height: 100px;
  border: 1px black solid;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

  <div id = "first-div">div one</div>
  
  <div id = "second-div">div two</div>

Помещение окна перед intervalID все исправило. А также проверка, не определено ли значение window.intervalID. Спасибо.

— 22.12.2020 05:29

22.12.2020 05:16