जावास्क्रिप्ट: उपयोगकर्ता के स्क्रॉलिंग के बाद एक क्रिया करें

Question

मैं ऐसा करने का एक तरीका समझने की कोशिश कर रहा हूं। मेरे पास बक्से की एक सूची है, प्रत्येक 150px उच्च है। मैं जावास्क्रिप्ट (और jquery) का उपयोग कर रहा हूं और चाहता हूं कि, उपयोगकर्ता किसी पृष्ठ को स्क्रॉल करने के बाद, पृष्ठ स्वत: स्क्रॉल करेगा ताकि बॉक्स शेष पृष्ठ के साथ लाइन हो (जो कहने के लिए, यदि उपयोगकर्ता स्क्रॉल करता है और y पृष्ठ की स्थिति 150 तक विभाजित नहीं है, यह उस निकटतम बिंदु पर स्क्रॉल करेगी)।

अब, मैं पल में, मैं जानता हूँ कि मैं .scroll() jQuery घटना का उपयोग कर एक घटना को सक्रिय कर सकते, और मैं इसे .scrollTop() का उपयोग कर एक निश्चित बिंदु पर ले जाने के कर सकते हैं। लेकिन प्रत्येक पिक्सेल उपयोगकर्ता स्क्रॉल बार को पूरे फ़ंक्शन को सक्रिय करता है। तो जब तक उपयोगकर्ता स्क्रॉल नहीं करता है तब तक फ़ंक्शन को फ़ायरिंग से देरी करने का कोई तरीका है, और यदि उन्हें फिर से स्क्रॉल करना प्रारंभ करना है, तो फ़ंक्शन रुक जाएगा?

Answer 1

आप पहले से ही jQuery का उपयोग कर रहे हैं, Ben Alman's doTimeout plugin पर एक नज़र जो पहले से ही तरीकों में से debouncing संभालती है (राशि है जो आप के बाद कर रहे हैं) है।

उदाहरण बेशर्म अपनी वेबसाइट से चोरी:

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

Answer 2

निश्चित रूप से, स्क्रॉल ईवेंट के लिए ईवेंट हैंडलर में, बाद में 100 या 200 मिलीसेकंड के लिए सेटटाइमआउट को बंद करें। स्क्रॉल इवेंट हैंडलर के अंदर सेट किए गए सेटटाइमआउट फ़ंक्शन को ऊपर बताए गए पोजिशनिंग तर्क को करें। स्क्रॉल इवेंट हैंडलर भी स्वयं द्वारा निर्धारित किसी भी टाइमआउट को साफ़ करें। इस तरह, आखिरी बार स्क्रॉल ईवेंट की आग लगती है, तो सेटटाइम फ़ंक्शन पूरा हो जाएगा क्योंकि स्क्रॉल ईवेंट ने इसे साफ़ नहीं किया है।

Answer 3

कोड:

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

यह एक परिदृश्य में, जहां वेनिला जावास्क्रिप्ट उपयोगी होगा होगा।

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

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

Answer 5

यह मूलतः Šime Vidas 'जवाब के रूप में ही है, लेकिन कम comlex:

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

500 विलंब हुआ है। माउस स्क्रॉल के लिए ठीक होना चाहिए।