Запускайте функцию только один раз при прокрутке (scrollstop)

Итак, я хотел бы запустить функцию только один раз при прокрутке (используя Scrollstop, данный ответом stackoverflow)

проблема в том, что я не могу запустить функцию только один раз. Я пробовал разные решения ( .на(), Установка счетчика, установка его снаружи/внутри окна.функция scrollstop), но ничего не получалось.

Я не думаю, что это сложно, но.. До сих пор у меня ничего не получалось.

вот плагин, который я используя

  $.fn.scrollStopped = function(callback) {           
          $(this).scroll(function(){
              var self = this, $this = $(self);
              if ($this.data('scrollTimeout')) {
                clearTimeout($this.data('scrollTimeout'));
              }
              $this.data('scrollTimeout', setTimeout(callback,300,self));
          });
      };

и вот мой код:

        $(window).scrollStopped(function(){
            if ($(".drawing1").withinViewport()) {      
                doNothing()
                }
            })


var doNothing = function() {
            $('#drawing1').lazylinepainter('paint');
        }

(убрал счетчик, так как он не работал)

видео здесь

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

7
javascript jquery jquery-plugins

3 ответов

Как насчет использования переменной, чтобы увидеть, был ли он ранее был уволен:

var fired = 0;
$.fn.scrollStopped = function(callback) {           
          $(this).scroll(function(){
              if(fired == 0){
                var self = this, $this = $(self);
                if ($this.data('scrollTimeout')) {
                  clearTimeout($this.data('scrollTimeout'));
                }
                $this.data('scrollTimeout', setTimeout(callback,300,self));
                fired = 1;
              }
          });
      };
6

вот моя версия того, что функция срабатывает один раз во время прослушивания события прокрутки:

var fired = false;
window.addEventListener("scroll", function(){
  if (document.body.scrollTop >= 1000 && fired === false) {
    alert('This will happen only once');
    fired = true;
  }
}, true)
7

Как насчет такого решения?

function scrollEvent() {
  var hT = $('#scroll-to').offset().top,
    hH = $('#scroll-to').outerHeight(),
    wH = $(window).height(),
    wS = $(this).scrollTop();
  if (wS > (hT+hH-wH)){
    console.log('H1 on the view!');
    window.removeEventListener("scroll", scrollEvent);
  }
}
window.addEventListener("scroll", scrollEvent);
0