बूटस्ट्रैप फ़ॉन्ट कमाल आइकन को कताई कैसे शुरू करें, फिर इसे jQuery

Question

के साथ रोकें। मेरे पास एक वेबपृष्ठ पर फ़ॉन्ट भयानक रीफ्रेश आइकन है जिस पर मैं काम कर रहा हूं।

<i class="fa fa-refresh fa-3x" id="lock-refresh"></i> 

जब यह आइकन क्लिक किया जाता है, तो मैं इसे कताई शुरू करना चाहता हूं। मैं अपने जावास्क्रिप्ट फ़ाइल में निम्न inputting द्वारा यह पूरा कर लिया है:

$('#lock-refresh').click(function() { 
    $(this).addClass('fa-spin'). 

    //Below is a function that I need to run after the FA icon is clicked. 
    startup(); 
}); 

मैं केवल इस आइकन सेकंड के एक जोड़े के लिए स्पिन, हालांकि जरूरत है। मैं अपने जे एस फ़ाइल को यह (नीचे) को जोड़ने के लिए कोशिश की है, लेकिन जब मैं आइकन करना बिल्कुल भी स्पिन नहीं करता है: मैं भी निम्नलिखित है, जो रूप में अच्छी तरह से काम नहीं करता की कोशिश की है

$('#lock-refresh').click(function() { 
    $(this).addClass('fa-spin'); 

    //Trying to remove the class after 1000 milliseconds. Not working. 
    $(this).delay(1000).removeClass('fa-spin'); 
    startup(); 
}); 

:

$('#lock-refresh').click(function() { 
    $(this).addClass('fa-spin').delay(1000).removeClass('fa-spin'); 
    startup(); 
}); 

मैं भी निम्नलिखित की कोशिश की है, लेकिन जब मैं कर इस आइकन कताई शुरू होता है, लेकिन बंद नहीं होगा:

$('#lock-refresh').click(function() { 
    $(this).addClass('fa-spin'); 

    //Trying to use setTimeout, but doesn't seem to work either. 
    setTimeout(function() { $(this).removeClass('fa-spin'); }, 1000); 
    startup(); 
}); 

मैं अपने startup() समारोह के बिना ऊपर के सभी की कोशिश की है, और यह एक ही परिणाम उत्पन्न करता है इसलिए मैं ' मुझे यकीन है कि यह समारोह नहीं है।

मैं अपने एफए रीफ्रेश आइकन को केवल एक या दो के लिए स्पिन करने के लिए कैसे प्राप्त करूं, फिर रुकें?

Answer 1

आप क्या करना चाहिए: इस के लिए, यह Function.prototype.bind विधि का उपयोग करने के लिए सुविधाजनक है

$('#lock-refresh').click(function() { 
    $(this).addClass('fa-spin'); 
    var $el = $(this); 
    setTimeout(function() { $el.removeClass('fa-spin'); }, 1000); 
    startup(); 
    // Whatever here. 
}); 

क्योंकि thissetTimeout(function(){ अंदर कुछ और ही था और क्लिक किया तत्व की ओर संकेत नहीं दिया गया था।

Working Fiddle

क्वेरी के सीएसएस हेरफेर पंक्तिबद्ध नहीं है, लेकिन आप इसे 'fx' कतार अंदर करके मार डाला बना सकते हैं:

$('#lock-refresh').click(function() { 
     $(this).addClass("fa-spin").delay(1000).queue('fx', function() { $(this).removeClass('fa-spin'); }); 
     startup(); 
     // Whatever here. 
}); 

Working Fiddle

Answer 2

आप इस मामले में delay विधि का उपयोग नहीं कर सकते हैं क्योंकि addClass देरी के साथ काम करने के लिए कतार इंटरफ़ेस वापस नहीं करता है।

तो आपको वास्तव में setTimeout का उपयोग करना चाहिए, लेकिन अंदर this मूल्य का उपयोग करना चाहिए। समस्या यह है कि सेटटाइमआउट वैश्विक ऑब्जेक्ट (this === window) संदर्भ में कॉलबैक फ़ंक्शन निष्पादित करेगा। तो आपको एक उचित संदर्भ प्रदान करने की आवश्यकता है।

$('#lock-refresh').click(function() { 
    $(this).addClass('fa-spin'); 
    setTimeout(function() { 
     $(this).removeClass('fa-spin'); 
    }.bind(this), 1000); 
    startup(); 
}); 

Answer 3

कुछ इस तरह करते हैं (ध्यान दें : setInterval के बजाय setTimout का उपयोग करें, मेरा खराब) https://jsfiddle.net/c7276oww/

$('#lock-refresh').click(function() { 
    $(this).addClass('fa-spin'); 
    setTimeout(function(){ $('#lock-refresh').removeClass('fa-spin'); }, 3000); 
    //Below is a function that I need to run after the FA icon is clicked. 
    startup(); 
});