AJAX अनुरोधों को ठीक से कैसे डिबॉन्स करें

Question

मेरे पास कुछ व्यवहार टॉगल करने से एक चेकबॉक्स है, हालांकि अगर कोई लगातार 100 क्लिक करता है तो मैं अपने सर्वर पक्ष में 100 अनुरोध नहीं भेजना चाहता हूं।

deBouncer = function($,cf,of, interval){ 
    var debounce = function (func, threshold, execAsap) { 
     var timeout; 
     return function debounced() { 
      var obj = this, args = arguments; 
      function delayed() { 
      if (!execAsap) 
       func.apply(obj, args); 
      timeout = null; 
      } 
      if (timeout) 
      clearTimeout(timeout); 
      else if (execAsap) 
      func.apply(obj, args); 
      timeout = setTimeout(delayed, threshold || interval); 
     } 
    } 
    jQuery.fn[cf] = function(fn){ return fn ? this.bind(of, debounce(fn)) : this.trigger(cf); }; 
    }; 

अपने दस्तावेज़ तैयार समारोह में:

deBouncer(jQuery,'smartoggle', 'click', 1500); 

तब घटना अपने आप में:

$(window).smartoggle(function(e){ 
    MyToggleFunction(); 
}); 

यह वही है मैं अब तक जगह में मिल गया (इस कोड स्निपेट पाया जाता है) है

यह काम करता है क्योंकि मैंने 1500 एमएस को उद्घोषणा अवधि के रूप में रखा है, इसलिए यदि आप 1500 एमएस के साथ एन बार क्लिक करते हैं तो यह केवल टी वह सर्वर के लिए नवीनतम राज्य।

हालांकि इसका उपयोग करने का दुष्प्रभाव है, अब अन्य सामग्री के लिए मेरा क्लिक ईवेंट गड़बड़ हो गया है। क्या मुझसे यहां कुछ गलत हो रहा है? क्या बहस करने का कोई बेहतर तरीका है?

Answer 1

यह सुनिश्चित करने के लिए कोई "उचित" तरीका नहीं है या नहीं।

कहा करने के बाद अंडरस्कोर इस तरह के एक उपयोगिता है कि अपने कार्य की debounced संस्करण तैयार हो जाएगा है ...

var MyToggleDebounced = _.debounce(MyToggleFunction, 1500); 

तो आपके क्लिक हैंडलर में MyToggleDebounced का उपयोग करें।

Link to debounce docs on underscorejs

वे इसे कैसे करते हैं के लिए एनोटेट स्रोत पर एक नजर डालें।

Answer 2

बस उस कार्य को अस्वीकार करें जो वास्तविक कार्य करता है और मैं इसके लिए पूरी लाइब्रेरी लोड नहीं करता।

var debouncedSomeFunction = debounce(someFunction, 1500); 
 

 
debouncedSomeFunction(); 
 
debouncedSomeFunction(); 
 
debouncedSomeFunction(); 
 

 
setTimeout(debouncedSomeFunction, 2000); 
 

 

 
function debounce(fn, bufferInterval) { 
 
    var timeout; 
 

 
    return function() { 
 
    clearTimeout(timeout); 
 
    timeout = setTimeout(fn.apply.bind(fn, this, arguments), bufferInterval); 
 
    }; 
 

 
} 
 

 
function someFunction() { 
 
    log('someFunction executed'); 
 
} 
 

 
function log(text) { 
 
    document.body.appendChild(document.createTextNode(text)); 
 
    document.body.appendChild(document.createElement('br')); 
 
}

Answer 3

मुझे लगता है कि इस सवाल का तुलना में यह पहले लगता है बेहतर है। एचटीपी अजाक्स कैसे काम करता है इस बारे में एक चेतावनी है। यदि आप देरी को 1500ms तक सेट करते हैं और आप गारंटी दे सकते हैं कि इस अनुरोध के तहत प्रत्येक अनुरोध की सेवा अन्य उत्तरों की तुलना में की जाती है, तो यह ठीक काम करेगा। हालांकि अगर कोई अनुरोध काफी धीमा हो जाता है तो अनुरोध आदेश से बाहर आ सकते हैं। यदि ऐसा होता है, तो आखिरी संसाधित अनुरोध वह है जिसके लिए डेटा प्रदर्शित किया जाएगा, अंतिम भेजा नहीं गया।

मैं इस वर्ग के इस चेतावनी से बचने के लिए लिखा था (टाइपप्रति में है, लेकिन आप इसे पढ़ने के लिए सक्षम होना चाहिए):

export class AjaxSync { 

    private isLoading: boolean = false; 
    private pendingCallback: Function; 
    private timeout; 

    public debounce(time: number, callback: Function): Function { 
    return this.wrapInTimeout(
     time, 
    () => { 
     if (this.isLoading) { 
      this.pendingCallback = callback; 
      return; 
     } 
     this.isLoading = true; 
     callback() 
      .then(() => { 
      this.isLoading = false; 
      if (this.pendingCallback) { 
       const pendingCallback = this.pendingCallback; 
       this.pendingCallback = null; 
       this.debounce(time, pendingCallback); 
      } 
      }); 
     } 
    ); 
    } 

    private wrapInTimeout(time, callback) { 
    return() => { 
     clearTimeout(this.timeout); 
     this.timeout = setTimeout(callback, time); 
    }; 
    } 
} 

यह दो ajax-अनुरोधों एक ही समय में संसाधित कर पाएगा और यह एक और भेज देंगे अगर कोई लंबित है तो अनुरोध करें।