के बाद से जावास्क्रिप्ट यूआई के रूप में ही धागे में चलता है, एक स्क्रॉल घटना कॉलबैक यूआई ब्लॉक कर सकते हैं:
jQuery स्क्रोलर प्लगइन्स के लिए उदाहरण थ्रेड और इस प्रकार अंतराल का कारण बनता है। आपको स्क्रॉल इवेंट श्रोता को थ्रॉटल करना होगा क्योंकि कुछ ब्राउज़र उनमें से बहुत से आग लगते हैं। विशेष रूप से यदि आप एक एनालॉग स्क्रॉल डिवाइस के साथ ओएस एक्स पर हैं। चूंकि आप अपने श्रोता में बहुत अधिक ऊंचाई गणना करते हैं, इसलिए निकाल दिए गए प्रत्येक स्क्रॉल ईवेंट के लिए it will trigger a reflow (बहुत महंगा)।
श्रोता को थ्रॉटल करने के लिए, आपको श्रोता को हर बार फायरिंग से रोकना होगा। आमतौर पर आप प्रतीक्षा करते हैं जब तक कि ब्राउज़र x मिलीसेकंड के लिए कोई ईवेंट ट्रिगर नहीं करता है, या आपके कॉलबैक को कॉल करने के बीच न्यूनतम समय होता है। प्रभाव देखने के लिए मूल्य समायोजित करने का प्रयास करें। यहां तक कि 0 मिलीसेकंड भी मदद कर सकते हैं, क्योंकि ब्राउज़र में समय होने पर कॉलबैक के निष्पादन में देरी होगी (आमतौर पर 5-40 एमएस)।
जावास्क्रिप्ट में हार्ड-कोडिंग के बजाय राज्यों (स्थिर और निश्चित स्थिति) के बीच स्विच करने के लिए कक्षा को टॉगल करना भी एक अच्छा अभ्यास है। फिर आपके पास चिंताओं का क्लीनर अलगाव और avoid potential extra redraws by mistake है (देखें "ब्राउज़र स्मार्ट हैं" अनुभाग देखें)।(example on jsfiddle) x एमएस के एक ठहराव
// return a throttled function
function waitForPause(ms, callback) {
var timer;
return function() {
var self = this, args = arguments;
clearTimeout(timer);
timer = setTimeout(function() {
callback.apply(self, args);
}, ms);
};
}
this.start = function() {
// wrap around your callback
$window.scroll(waitForPause(30, self.worker));
};
प्रतीक्षा में कम से कम एक्स एमएस (jsfiddle)
function throttle(ms, callback) {
var timer, lastCall=0;
return function() {
var now = new Date().getTime(),
diff = now - lastCall;
console.log(diff, now, lastCall);
if (diff >= ms) {
console.log("Call callback!");
lastCall = now;
callback.apply(this, arguments);
}
};
}
this.start = function() {
// wrap around your callback
$window.scroll(throttle(30, self.worker));
};
jQuery वेपाइंट आप कर रहे हैं के बाद से के लिए
प्रतीक्षा पहले से ही jQuery का उपयोग कर, मैंपर एक नज़र डालेगाप्लगइन जिसमें आपकी समस्या का एक सरल और सुरुचिपूर्ण समाधान है। जब उपयोगकर्ता किसी निश्चित तरीके से स्क्रॉल करता है तो बस कॉलबैक को परिभाषित करें।
उदाहरण: (jsfiddle)
$(document).ready(function() {
// throttling is built in, just define ms
$.waypoints.settings.scrollThrottle = 30;
$('#content').waypoint(function(event, direction) {
$(this).toggleClass('sticky', direction === "down");
event.stopPropagation();
}, {
offset: 'bottom-in-view' // checkpoint at bottom of #content
});
});
मैं इसे और अधिक कुछ कैसे फ़ायरफ़ॉक्स स्क्रॉल आसान है और कैसे छिपकली/राइनो आग/पुस्तक घटना की व्याख्या किसी और चीज से अन्य ब्राउज़र से अलग ढंग से, तो यह होगा के साथ क्या करना है लगता था शायद 'स्क्रॉल' श्रोता दृष्टिकोण का उपयोग करके अभी भी ठीक करने के लिए कुछ कठिन हो, और मुझे कोई अन्य संभावित दृष्टिकोण नहीं दिखाई देता है, लेकिन भाग्यशाली व्यक्ति का सबसे अच्छा। –