Javascript: kullanıcı kaydırma tamamlandıktan sonra bir işlem yapın

Question

Bunu yapmanın bir yolunu bulmaya çalışıyorum. Her biri yaklaşık 150px yüksekliğinde bir kutu listem var. Javascript (ve jquery) kullanıyorum ve bir kullanıcı sayfayı aşağı kaydırdıktan sonra sayfanın otomatik olarak kaydırılmasını ve böylece sayfaların geri kalanıyla satırların sıraya girmesini (yani, kullanıcının sayfanın pozisyonu 150 ile bölünemez, en yakın noktaya kaydırılır).

Şimdi, bir olayın .scroll() jquery olayını kullanarak etkinleştirebileceğimi biliyorum ve .scrollTop() kullanarak belirli bir noktaya taşıyabiliyorum. Ancak, kullanıcının kaydırma çubuğunu hareket ettirdiği her piksel, tüm işlevi etkinleştirir. Bu nedenle, kullanıcının kaymayana dek fonksiyonu ateşlemenin bir yolu var mıdır ve eğer tekrar kaymaya başlayacaklarsa işlev durur mu?

Answer 1

Zaten jQuery kullanıyorsanız gibi, zaten (Sonra ne olduğu) yöntemlerden debouncing kolları Ben Alman's doTimeout plugin de bakabilirsiniz. utanmadan kendi web sitesinde çalınan

Örnek:

$(window).scroll(function(){ 
    $.doTimeout('scroll', 250, function(){ 
     // do something computationally expensive 
    }); 
}); 

Answer 2

Elbette, kaydırma olayının olay işleyicisinde, 100 veya 200 milisaniye sonra setTimeout'u kapatın. Kaydırma olay işleyicisinin içine ayarladığınız setTimeout işlevini, yukarıda belirttiğiniz konumlandırma mantığını yapın. Ayrıca, kaydırma olay işleyicisinin kendi belirlediği zamanaşımlarını temizleyin. Bu şekilde, kaydırma olayı en son tetiklendiğinde, scroll olayı temizlenmediğinden setTimeout işlevi tamamlanır.

Answer 3

kodu:

var scrollTimeout = null; 
var scrollendDelay = 500; // ms 

$(window).scroll(function() { 
    if (scrollTimeout === null) { 
     scrollbeginHandler(); 
    } else { 
     clearTimeout(scrollTimeout); 
    } 
    scrollTimeout = setTimeout(scrollendHandler, scrollendDelay); 
}); 

function scrollbeginHandler() { 
    // this code executes on "scrollbegin" 
    document.body.style.backgroundColor = "yellow"; 
} 

function scrollendHandler() { 
    // this code executes on "scrollend" 
    document.body.style.backgroundColor = "gray"; 
    scrollTimeout = null; 
} 

Answer 4

Bu vanilya JavaScript yararlı olacak bir senaryo olurdu.

var yourFunction = function(){ 
    // do something computationally expensive 
} 

$(window).scroll(function(){ 
    yfTime=setTimeout("yourFunction()",250); 
}); 

Answer 5

Bu temelde Šime Vidas' cevabı ile aynıdır, ancak daha az comlex:

var scrollTimeout = null; 
$(window).scroll(function(){ 
    if (scrollTimeout) clearTimeout(scrollTimeout); 
    scrollTimeout = setTimeout(function(){yourFunctionGoesHere()},500); 
}); 

500 gecikmedir. Fare kaydırma için tamam olmalı.