मेरे पास एक बटन है, जिस पर 500 एमएमएस में एक div दिखाया गया है और उसके बाद उस div पर 500ms वर्ग शेक जोड़ा गया है। इस शेक क्लैस को delay
के साथ 2 सेकंड के बाद हटा दिया जाता है। मैं क्या चाहता हूं कि यदि उपयोगकर्ता बटन पर दबाना जारी रखता है तो आखिरी एक को छोड़कर सभी कॉलबैक रद्द हो जाते हैं। clearQueue साथभविष्य में कतार में समाशोधन से clearQueue() को कैसे रोकें?
$("button").click(function() {
$(".content").show({
duration: 500,
done: function() {
$(".content").addClass("shake");
var time = parseFloat($(".content").css("transition-duration")) * 1000;
$(".content").delay(time).queue(function() {
console.log("shake");
$(".content").removeClass("shake");
$(".content").dequeue();
});
}
})
});
div.content {
border: 1px solid red;
transition: background-color 2s ease-out;
background-color: black;
display: none;
}
div.content.shake {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>click</button>
<div class="content">Content</div>
मेरे समाधान:
समस्याग्रस्त कोड क्लिक कई बार दबाया जाता है, तो
$("button").click(function() {
$(".content").show({
duration: 500,
done: function() {
$(".content").clearQueue();
$(".content").addClass("shake");
var time = parseFloat($(".content").css("transition-duration")) * 1000;
$(".content").delay(time).queue(function() {
console.log("shake");
$(".content").removeClass("shake");
$(".content").dequeue();
});
}
})
});
div.content {
border: 1px solid red;
transition: background-color 2s ease-out;
background-color: black;
display: none;
}
div.content.shake {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>click</button>
<div class="content">Content</div>
बू टी इस विधि को जोड़ने के लिए shake
कक्षा को कभी भी अनुमति नहीं देता है। चूंकि clearQueue
के बाद उल्लिखित कतार भी साफ़ कर दी गई है।
मैं स्पष्ट कतार() को भविष्य में कतारों में समाशोधन से कैसे रोक सकता हूं? और clearQueue()
इस तरह से व्यवहार क्यों करता है? यह कैसे पता चलता है कि queue
भविष्य में क्या जोड़ा जाएगा?
आप '' इस के लिए .queue() का उपयोग करना होगा करने के लिए एक समारोह का कहना है कि? ऐसा लगता है कि आप जिस प्रभाव को चाहते हैं उसे पाने के लिए बेहतर विकल्प हैं। –
क्या आप '.delay()' के बजाय 'setTimeout' का उपयोग कर सकते हैं? – jbe
@jbe हां, मेरी लाइव साइट पर मैंने 'setTimout' के साथ समस्या को ठीक किया। लेकिन मैं समझना चाहता हूं कि 'clearQueue() 'कैसे काम करता है। – user31782