Heim Web-Frontend js-Tutorial jQuery 源码分析笔记(7) Queue_jquery

jQuery 源码分析笔记(7) Queue_jquery

May 16, 2016 pm 06:05 PM
jquery 源码分析

每个Element可以拥有多个队列,但是基本上都只使用到一个,即默认的fn队列。队列允许一系列函数被异步地调用而不会阻塞程序。例如:$("#foo").slideUp().fadeIn();其实这个就是我们大家常用的链式调用,实际上这是一个Queue。所以队列和Deferred地位类似,是一个内部使用的基础设施。当slideUp运行时,fadeIn被放到fx队列中,当slideUp完成后,从队列中被取出运行。queue函数允许直接操作这个链式调用的行为。同时,queue可以指定队列名称获得其他能力,而不局限于fx队列。

复制代码 代码如下:

// 一般用法:
$("#foo").slideUp(function() {
alert("Animation complete.");
});
// 相当于:
$("#foo").slideUp(); // 不提供回调,只是触发事件
$("#foo").queue(function() { // 把回调函数加入
alert("Animation complete.");
$(this).dequeue(); // 必须从队列中取出,那么队列中的下一个函数就有机会被调用
});

queue内部使用data或者JavaScript数组API来保存数据。其中操作数组的push和shift天生就是一组队列API。而data可以用来保存任意数据。
复制代码 代码如下:

queue: function(elem, type, data) {
if(elem) {
// 默认是fn
type = (type || "fx") + "queue";
// data内部API:data(element, key, value, pvt);
// 这里不传入data,是为了效率的考虑。如果没传入data,则只是get队列,那么就不需要以下的判断了
var q = jQuery.data(elem, type, undefined, true);
if(data) {
if(!q || jQuery.isArray(data)) {
q = jQuery.data(elem, type, jQuery.makeArray(data), true);
} else {
q.push(data); // 压入
}
}
return q || [];
}
}
dequeue: function(elem, type) { type = type || "fx"; // 得到这个队列 var queue = jQuery.queue(elem, type), // 出列一个元素 fn = queue.shift(), defer;
// "inprogress"岗哨
if(fn === "inprogress") {
fn = queue.shift();
}
if(fn) {
// 加一个岗哨,防止自动出列
if(type === "fx") {
queue.unshift("inprogress");
}
// 执行
fn.call(elem, function() {
jQuery.dequeue(elem, type);
});
}
if(!queue.length) {
jQuery.removeData(elem, type + "queue", true);
handleQueueMarkDefer(elem, type, "queue");
}
}
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Ausführliche Erläuterung der jQuery-Referenzmethoden: Kurzanleitung Ausführliche Erläuterung der jQuery-Referenzmethoden: Kurzanleitung Feb 27, 2024 pm 06:45 PM

Ausführliche Erläuterung der jQuery-Referenzmethoden: Kurzanleitung

Wie verwende ich die PUT-Anfragemethode in jQuery? Wie verwende ich die PUT-Anfragemethode in jQuery? Feb 28, 2024 pm 03:12 PM

Wie verwende ich die PUT-Anfragemethode in jQuery?

Wie entferne ich das Höhenattribut eines Elements mit jQuery? Wie entferne ich das Höhenattribut eines Elements mit jQuery? Feb 28, 2024 am 08:39 AM

Wie entferne ich das Höhenattribut eines Elements mit jQuery?

jQuery-Tipps: Ändern Sie schnell den Text aller a-Tags auf der Seite jQuery-Tipps: Ändern Sie schnell den Text aller a-Tags auf der Seite Feb 28, 2024 pm 09:06 PM

jQuery-Tipps: Ändern Sie schnell den Text aller a-Tags auf der Seite

Verwenden Sie jQuery, um den Textinhalt aller a-Tags zu ändern Verwenden Sie jQuery, um den Textinhalt aller a-Tags zu ändern Feb 28, 2024 pm 05:42 PM

Verwenden Sie jQuery, um den Textinhalt aller a-Tags zu ändern

Verstehen Sie die Rolle und Anwendungsszenarien von eq in jQuery Verstehen Sie die Rolle und Anwendungsszenarien von eq in jQuery Feb 28, 2024 pm 01:15 PM

Verstehen Sie die Rolle und Anwendungsszenarien von eq in jQuery

Zusammenfassung häufig verwendeter Dateioperationsfunktionen in PHP Zusammenfassung häufig verwendeter Dateioperationsfunktionen in PHP Apr 03, 2024 pm 02:52 PM

Zusammenfassung häufig verwendeter Dateioperationsfunktionen in PHP

Wie kann man feststellen, ob ein jQuery-Element ein bestimmtes Attribut hat? Wie kann man feststellen, ob ein jQuery-Element ein bestimmtes Attribut hat? Feb 29, 2024 am 09:03 AM

Wie kann man feststellen, ob ein jQuery-Element ein bestimmtes Attribut hat?

See all articles