एपीआई को कॉल करने के लिए कीप इवेंट पर ट्वीकिंग एक बार ऐसा लगता है कि उपयोगकर्ता ने

Question

टाइप करना समाप्त कर दिया है मेरे पास एक पोस्टकोड फ़ील्ड है जिसमें एक jQuery ऑनकेप इवेंट है - विचार यह है कि एक बार जब वे Google मानचित्र Geocoding API को कॉल करने के लिए अपने पोस्टकोड को पूरी तरह से दर्ज कर लेते हैं तुरंत इस पोस्टकोड पर आधारित स्थान।

यह कोड काम करता है हालांकि मैं एक ऐसा समाधान ढूंढना चाहता हूं जो आदर्श रूप से एपीआई को कई बार कॉल न करे, लेकिन प्रतीक्षा करें और देखें कि उपयोगकर्ता ने x समय के लिए प्रतीक्षा करने की कुछ विधि का उपयोग करके टाइपिंग समाप्त कर दी है और फिर API को कॉल करना है ।

क्या कोई ऐसा करने का सबसे अच्छा तरीका सुझा सकता है?

$("#txtPostcode").keyup(function() { 
    var postcode = $('#txtPostcode').val().length 
    if (postcode.length >= 5 && postcode.length <= 8) { 
     console.log('length is a valid UK length for a postcode'); 
     // some logic here to run with some way to work out if user has 'finished' typing 
     callGoogleGeocodingAPI(postcode); 
    } 
}); 

Answer 1

आप setTimeout का उपयोग केवल कॉल करने के लिए कर सकते हैं के बाद टाइपिंग 250ms के लिए बंद कर दिया है - यह आम तौर पर कीस्ट्रोक्स के बीच पर्याप्त समय पूर्ण प्रविष्टि अनुमति है। इस प्रयास करें:

var timer; 
$("#txtPostcode").keyup(function() { 
    clearTimeout(timer); 
    timer = setTimeout(function() { 
     var postcode = $('#txtPostcode').val().length 
     if (postcode.length >= 5 && postcode.length <= 8) { 
      console.log('length is a valid UK length for a postcode'); 
      // some logic here to run with some way to work out if user has 'finished' typing 
      callGoogleGeocodingAPI(postcode); 
     } 
    }, 250); 
}); 

आप सटीक समय समाप्ति tweak आपकी आवश्यकताओं के अनुकूल करने के लिए कर सकते हैं, अगर आपको लगता है एक देरी के बहुत ज्यादा।

Answer 2

यहां एक कार्यात्मक सजावटी है जो अंतिम कीप्रेस तक ईवेंट में देरी करेगा। आप सबसे अच्छा अनुभव पाने के लिए देरी के समय के साथ खेल सकते हैं। 200ms एक मनमाना मूल्य है।

$("#txtPostcode").keyup(delayEvent(function(e) { 
 
    
 
    console.log('event fired'); 
 
    // this refers to the element clicked, and there is an issue with in the if statement 
 
    // you are checking postcode.length.length which probably throws an error. 
 
    var postcode = $(this).val(); 
 
    if (postcode.length >= 5 && postcode.length <= 8) { 
 
    console.log('length is a valid UK length for a postcode'); 
 

 
    // some logic here to run with some way to work out if user has 'finished' typing 
 
    // callGoogleGeocodingAPI(postcode); 
 
    } 
 
}, 200)); 
 

 
// this is a functional decorator, that curries the delay and callback function 
 
// returning the actual event function that is run by the keyup handler 
 
function delayEvent(fn, delay) { 
 
    var timer = null; 
 
    // this is the actual function that gets run. 
 
    return function(e) { 
 
    var self = this; 
 
    // if the timeout exists clear it 
 
    timer && clearTimeout(timer); 
 
    // set a new timout 
 
    timer = setTimeout(function() { 
 
     return fn.call(self, e); 
 
    }, delay || 200); 
 
    } 
 
}

<script src="http://codepen.io/synthet1c/pen/WrQapG.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="txtPostcode">

Answer 3

आप भी अपने कोड में .keyup() के बजाय) .blur का उपयोग कर (यदि आपने पहले से प्रयास नहीं किया है की कोशिश कर सकते हैं।