रखी गई राशि

Question

द्वारा ऑर्डर करने वाली वस्तुओं को शामिल करें मैं राशि के अनुसार नई वस्तुओं को जोड़ने के लिए इस फ़ंक्शन का उपयोग कर रहा हूं। इस समारोह को हर 30-50ms कहा जा रहा है।

var insertBefore = false; 
container.find('.roll-user-row[data-user-id="' + user_data.id + '"]').remove(); 

container.children().each(function() { 
    var betContainer = $(this), itemAmount = $(this).attr('data-amount'), betId = $(this).attr('data-user-id'); 
    if (itemAmount < betData.totalAmount) { 
     insertBefore = betContainer; 
     return false; 
    } 
}); 

if (insertBefore) { 
    $(template).insertBefore(container); 
} else { 
    container.prepend(template); 
} 

itemAmount = $(this).attr('data-amount'), पूर्णांक है betData.totalAmount भी interger है। और यदि संलग्न करना ± 300ms से धीमा हो जाता है - सबकुछ ठीक से काम करता है। तेजी से appending के मामले में मैं इस परिणाम मिलता है:

और यहां तक ​​कि बंद नहीं thats कि मैं क्या चाहता हूँ - यादृच्छिक thats। इसे कैसे हल करें?

Answer 1

1. पुनर्रचना

सबसे पहले, return.each भीतर कॉलबैक काम नहीं करता। यह सिर्फ वर्तमान चक्र को तोड़ता है, सभी चक्र नहीं। यदि आप सिलस को बाधित करना चाहते हैं, तो आपको सरल फॉर-लूप और break कथन का उपयोग करना चाहिए। फिर, मैं शायद ही कभी संभवतः $() पर कॉल करने की अनुशंसा करता हूं, क्योंकि यह is expensive है। इसलिए मैं अपने समारोह के लिए निम्नलिखित रिफैक्टरिंग सुझाव है:

function run() { 
    container.find('.roll-user-row[data-user-id="' + user_data.id + '"]').remove(); 

    var children = container.children(); 
    for (var i = 0; i < children.length; i++) { 
    var betContainer = $(children[i]); // to cache children[i] wrapping 
    var itemAmount = betContainer.attr('data-amount'); 
    var betId = betContainer.attr('data-user-id'); 

    if (itemAmount < betData.totalAmount) { 
     $(template).insertBefore(container); 
     return; // instead of "break", less code for same logic 
    } 
    } 

    container.prepend(template); // would not be executed in case of insertBefore due to "return" 
} 

2. थ्रॉटलिंग

एक 50ms प्रक्रिया को दोहराते हैं, तो आप setInterval(run, 50) की तरह कुछ का उपयोग कर रहे चलाने के लिए। यदि आपको यह सुनिश्चित करने की आवश्यकता है कि run किया गया है और यह 300ms देरी है, तो आप केवल setInterval(run, 300) का उपयोग कर सकते हैं। लेकिन अगर प्रक्रिया एक तरीका है कि आप बदल नहीं सकते में initializes, और 50ms कि के लिए निश्चित अंतराल है, तो आप run बुला lodash throttle या jquery throttle plugin द्वारा की रक्षा कर सकते हैं:

var throttledRun = _.throttle(run, 300); // var throttledRun = $.throttle(300, run); 
setInterval(throttledRun, 50); 

setInterval सिर्फ उदाहरण के लिए है, तो आप की जरूरत है अपने पुनरावर्तक प्रारंभिक तर्क में थ्रॉटल संस्करण (throttledRun) के साथ अपने शुरुआती run को प्रतिस्थापित करें। इसका मतलब है कि run को तब तक निष्पादित नहीं किया जाएगा जब तक कि पिछले run निष्पादन के बाद 300ms अंतराल पारित नहीं हो जाता है।

Answer 2

मेरी समझ सही है, तो मैं केवल यहां दृष्टिकोण पोस्ट कर रहा हूं, तो मैं एक कोड पोस्ट करूंगा। पहली बात मेरे दिमाग में पढ़ने के लिए यह 'Virtual DOM' concept था। यहां आप क्या कर सकते हैं,

1. ऑब्जेक्ट जैसे डेटा संरचना को बनाए रखने के लिए अत्यधिक लगातार यादृच्छिक फ़ंक्शन कॉल का उपयोग करें। डोम अपडेट पर भरोसा मत करो।

2. फिर उस डेटा संरचना से अपने डीओएम को फिर से निकालने (या अपडेट) करने के लिए बहुत कम setInterval दोहराव वाली फ़ंक्शन कॉल का उपयोग करें।

मुझे यकीन है कि किसी भी कारण से यदि आप इस दृष्टिकोण नहीं ले जा सकते हैं नहीं कर रहा हूँ, लेकिन यह सबसे कारगर तरीका एक समय महत्वपूर्ण यूज-केस में डोम को संभालने के लिए किया जाएगा।