定位不能用虚拟定位吗

引言

在那篇经典的关于jQuery1.5中Deferred使用方法介绍的文章中（译文见这里），有下面一段描述：

$.ajax() returns an object packed with other deferred-related methods. I discussed promise(), but you'll also find then(), success(), error(), and a host of others. You don't have access to the complete deferred object, though; only the promise, callback-binding methods, and the isRejected() and isResolved() methods, which can be used to check the state of the deferred.
But why not return the whole object? If this were the case, it would be possible to muck with the works, maybe pragmatically "resolve" the deferred, causing all bound callbacks to fire before the AJAX request had a chance to complete. Therefore, to avoid potentially breaking the whole paradigm, only return the dfd.promise().

这段话非常令人费解，我也是看了几遍才看明白。大致的意思是：
$.ajax()返回一个对象（jqXHR，这是对原生的XMLHttpRequest的封装），这个对象包含了deferred相关的函数，比如promise(), then(), success(), error(), isRejected(), isResolved()。
但是你发现没，这里面没有resolve(), resolveWith(), reject(), rejectWith() 几个函数，而这几个函数才是用来改变deferred对象流程。也就是说$.ajax()返回了一个只读的deferred对象。

下面erichynds改用反问的语气提出，为什么不返回完整的deferred对象，而只返回只读的deferred对象？
如果返回完整的deferred对象，那么外部程序就能随意的触发deferred对象的回调函数，很有可能在AJAX请求结束前就触发了回调函数（resolve），这就是与AJAX本身的逻辑相违背了。
所以为了避免不经意间改变任务的内部流程，我们应该只返回deferred的只读版本（dfd.promise()）。

为了说明$.ajax()和$.Deferred()返回的deferred对象的不同，请看下面的例子：

复制代码代码如下:

 
// deferred对象所有的方法数组 
var methods = 'done,resolveWith,resolve,isResolved,then,fail,rejectWith,reject,isRejected,promise'.split(','), 
method, 
ajaxMethods = [], 
onlyInDeferredMethods = []; 
for (method in $.ajax()) { 
if ($.inArray(method, methods) !== -1) { 
ajaxMethods.push(method); 
} 
} 

for (method in $.Deferred()) { 
if ($.inArray(method, methods) !== -1 && $.inArray(method, ajaxMethods) === -1) { 
onlyInDeferredMethods.push(method); 
} 
} 
// 存在于$.Deferred()，但是不存在于$.ajax()的deferred相关方法列表为： 
// ["resolveWith", "resolve", "rejectWith", "reject"] 
console.log(onlyInDeferredMethods); 

反面教材
如果$.ajax()返回的对象包含resolve(), resolveWith()，可能会产生哪些影响呢？
我们还是用例子也说明，首先看看erichynds原文的第一个例子：

复制代码代码如下:

 
// $.get, 异步的AJAX请求 
var req = $.get('./sample.txt').success(function (response) { 
console.log('AJAX success'); 
}).error(function () { 
console.log('AJAX error'); 
}); 

// 添加另外一个AJAX回调函数，此时AJAX或许已经结束，或许还没有结束 
// 由于$.ajax内置了deferred的支持，所以我们可以这样写 
req.success(function (response) { 
console.log('AJAX success2'); 
}); 

console.log('END'); 

执行结果为：
END -> AJAX success -> AJAX success2

下面修改jQuery1.5源代码，为$.ajax()的返回值添加resolve()和resolveWith()函数:

复制代码代码如下:

 
// Attach deferreds 
deferred.promise( jqXHR ); 
jqXHR.success = jqXHR.done; 
jqXHR.error = jqXHR.fail; 
jqXHR.complete = completeDeferred.done; 
// 下面两行是我们手工增加的，jQuery源代码中没有 
jqXHR.resolve = deferred.resolve; 
jqXHR.resolveWith = deferred.resolveWith; 

然后，执行下面代码：

复制代码代码如下:

 
// $.get, 异步的AJAX请求 
var req = $.get('./sample.txt').success(function (response) { 
console.log('AJAX success'); 
}).error(function () { 
console.log('AJAX error'); 
}); 

req.resolve(); 

// 添加另外一个AJAX回调函数，此时AJAX或许已经结束，或许还没有结束 
// 由于$.ajax内置了deferred的支持，所以我们可以这样写 
req.success(function (response) { 
console.log('AJAX success2'); 
}); 

console.log('END'); 

此时的执行结果为：
AJAX success -> AJAX success2 -> END

也就是说，在真实的AJAX请求结束之前，success的回调函数就已经被触发了，出现错误。

为了更清楚的看清这一切，我们手工给success回调函数传递一些伪造的参数：

复制代码代码如下:

 
// $.get, 异步的AJAX请求 
var req = $.get('./sample.txt').success(function (response) { 
console.log('AJAX success(' + response + ')'); 
}); 

req.resolve('Fake data'); 

// 添加另外一个AJAX回调函数，此时AJAX或许已经结束，或许还没有结束 
// 由于$.ajax内置了deferred的支持，所以我们可以这样写 
req.success(function (response) { 
console.log('AJAX success2(' + response + ')'); 
}); 

console.log('END'); 

此时的执行结果为：
AJAX success(Fake data) -> AJAX success2(Fake data) -> END

代码分析
在深入jQuery代码之前，先来看看jQuery.promise的文档：
The deferred.promise() method allows an asynchronous function to prevent other code from interfering with the progress or status of its internal request. The Promise exposes only the Deferred methods needed to attach additional handlers or determine the state (then, done, fail, isResolved, and isRejected), but not ones that change the state (resolve, reject, resolveWith, and rejectWith).
If you are creating a Deferred, keep a reference to the Deferred so that it can be resolved or rejected at some point. Return only the Promise object via deferred.promise() so other code can register callbacks or inspect the current state.

大致意思是说，deferred.promise()用来阻止其它代码修改异步任务的内部流程。Promise的对象只对外公开添加回调函数和检测状态的函数，而不包含修改状态的函数。
如果你手工创建了一个deferred对象，那么你要维持对这个deferred对象的引用，以此来修改状态触发回调函数。不过你的返回值应该是deferred.promise()，这样外部程序可以添加回调函数或检测状态，而不能修改状态。

至此，大家对promise应该有清晰的认识了。我们再来看下面两段代码，它们完成的功能完全一致：

复制代码代码如下:

 
function getData() { 
return $.get('/foo/'); 
} 

function showDiv() { 
// 正确代码。推荐做法。 
return $.Deferred(function (dfd) { 
$('#foo').fadeIn(1000, dfd.resolve); 
}).promise(); 
} 

$.when(getData(), showDiv()).then(function (ajaxResult) { 
console.log('The animation AND the AJAX request are both done!'); 
}); 

复制代码代码如下:

 
function getData() { 
return $.get('/foo/'); 
} 

function showDiv() { 
// 正确代码。不推荐这么做。 
return $.Deferred(function (dfd) { 
$('#foo').fadeIn(1000, dfd.resolve); 
}); 
} 

$.when(getData(), showDiv()).then(function (ajaxResult) { 
console.log('The animation AND the AJAX request are both done!'); 
}); 

虽然上面两段代码完成相同的任务，并且似乎第二段代码更加简洁，但是第二段代码却不是推荐的做法。
因为任务（showDiv）本身状态的更改应该保持在任务内部，而不需要对外公开，对外只需要公开一个promise的只读deferred对象就行了。

最后，我们来看看Deferred相关源代码：

复制代码代码如下:

 
// Promise相关方法数组 
promiseMethods = "then done fail isResolved isRejected promise".split( " " ), 

jQuery.extend( 
// 完备的deferred对象（具有两个回调队列） 
Deferred: function (func) { 
var deferred = jQuery._Deferred(), 
failDeferred = jQuery._Deferred(), 
promise; 
// 添加then, promise 以及出错相关的deferred方法 
jQuery.extend(deferred, { 
then: function (doneCallbacks, failCallbacks) { 
deferred.done(doneCallbacks).fail(failCallbacks); 
return this; 
}, 
fail: failDeferred.done, 
rejectWith: failDeferred.resolveWith, 
reject: failDeferred.resolve, 
isRejected: failDeferred.isResolved, 
// 返回deferred对象的只读副本 
// 如果将obj作为参数传递进去，则promise相关方法将会添加到这个obj上 
promise: function (obj) { 
if (obj == null) { 
if (promise) { 
return promise; 
} 
promise = obj = {}; 
} 
var i = promiseMethods.length; 
while (i--) { 
obj[promiseMethods[i]] = deferred[promiseMethods[i]]; 
} 
return obj; 
} 
}); 
// 确保只有一个回调函数队列可用，也就是说一个任务要么成功，要么失败 
deferred.done(failDeferred.cancel).fail(deferred.cancel); 
// 删除cancel函数 
delete deferred.cancel; 
// 将当前创建的作为参数传递到给定的函数中 
if (func) { 
func.call(deferred, deferred); 
} 
return deferred; 
}); 

如果你觉得上面的代码阅读比较困难，没关系我写了一个简单的类似代码：

复制代码代码如下:

 
Arr = function () { 
var items = [], 
promise, 
arr = { 
add: function (item) { 
items.push(item); 
}, 
length: function () { 
return items.length; 
}, 
clear: function () { 
items = []; 
}, 
promise: function () { 
if (promise) { 
return promise; 
} 
var obj = promise = {}; 
obj.add = arr.add; 
obj.length = arr.length; 
obj.promise = arr.promise; 
return obj; 
} 
}; 
return arr; 
} 

上面代码定义了一个Arr，用来生成一个数组对象，包含一些方法，比如add(), length(), clear(), promise()。
其中promise()返回当前Arr对象的一个副本，只能向其中添加元素，而不能清空内部数组。

复制代码代码如下:

 
var arr = Arr(); 
arr.add(1); 
arr.add(2); 
// 2 
console.log(arr.length()); 
arr.clear(); 
// 0 
console.log(arr.length()); 
var arr = Arr(); 
arr.add(1); 
arr.add(2); 
// 2 
console.log(arr.length()); 
var promise = arr.promise(); 
promise.add(3); 
promise.add(4); 
// 4 
console.log(promise.length()); 
// Error: TypeError: promise.clear is not a function 
promise.clear(); 

deferred.promise()与deferred.promise().promise()
还记得前面提到的那两个完成相同功能的代码么？

复制代码代码如下:

 
function getData() { 
return $.get('/foo/'); 
} 

function showDiv() { 
// 这里返回promise()或者直接返回deferred对象，代码都能正确运行。 
return $.Deferred(function (dfd) { 
$('#foo').fadeIn(1000, dfd.resolve); 
}).promise(); 
} 

$.when(getData(), showDiv()).then(function (ajaxResult) { 
console.log('The animation AND the AJAX request are both done!'); 
}); 

那么你有没有思考过，为什么这两种方式都能运行呢？
如果你深入jQuery的源代码，你会发现$.when(obj1, obj2, ...)在内部实现时会获取obj1.promise()：

复制代码代码如下:

 
if ( object && jQuery.isFunction( object.promise ) ) { 
object.promise().then( iCallback(lastIndex), deferred.reject ); 
} 

所以我们来看上面showDiv的返回结果：
如果是deferred对象的话，$.when()通过下面方式得到promise：
$.Deferred().promise()

如果是deferred.promise()对象的话，$.when()通过下面方式得到promise：
$.Deferred().promise().promise()

那么是不是说：$.Deferred().promise() === $.Deferred().promise().promise()
我们还是通过示例来验证我们的想法：

复制代码代码如下:

 
var deferred = $.Deferred(), 
promise = deferred.promise(); 
// true 
promise === promise.promise(); 
// true 
promise === promise.promise().promise().promise(); 

当然，这个结果是推理出来的，如果我们直接看Deferred的源代码，也很容易看出这样的结果：

复制代码代码如下:

 
promise: function (obj) { 
if (obj == null) { 
// 在这里，如果promise已经存在（已经调用过.promise()），就不会重新创建了 
if (promise) { 
return promise; 
} 
promise = obj = {}; 
} 
var i = promiseMethods.length; 
while (i--) { 
obj[promiseMethods[i]] = deferred[promiseMethods[i]]; 
} 
return obj; 
} 

总结

1. deferred.promise()返回的是deferred对象的只读属性。
2. 建议任务不要返回deferred对象，而是返回deferred.promise()对象。这样外部就不能随意更改任务的内部流程。
3. deferred.promise() === deferred.promise().promise() （上面我们分别从代码推理，和源代码分析两个角度得到这个结论）

本文由三生石上原创，博客园首发，转载请注明出处。定位不能用虚拟定位吗

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

解决减少空指针异常的妙招
空指针异常是平时运行代码时一个非常让人头疼的错误了，那么如何避免，减少这种错误的产生呢？我们看到这个方法是要创建一个对象，默认给的是直接：return null;当对象创建失败时，会直接返回空，就没办法返回，系统就会报空指针异常但是红框中的这一手操作当对象创建失败时…...
2024/4/25 2:06:55
什么人会钉钉虚拟定位如何跳过检测
而本文所提到的预加载技术主要是让javascript快速获取图片头部数据的尺寸。一段典型的使用预加载获取图片大小的例子：复制代码代码如下: var imgLoad = function (url, callback) { var img = new Image(); img.src = url; if (img.complete) { callback(img.width, img.hei…...
2024/4/26 0:50:34
欧拉筛
原理：比起埃氏算法，减少了重复筛选。让每个数只能被最小的质数最大的合数筛选。在埃氏算法中，30被215，310，56都筛选了，这里只被2*15筛选。关键 if (i % prime[j] == 0) { break; } 如果 I=k* prime[j],不break，下一步筛掉k* prime[j]* prime[j+1]，而k* prime[j]* prim…...
2024/4/14 14:17:41
电脑多开行者虚拟定位软件安卓版
为了防止图片撑破布局，最常见的仍然是通过onload后获取图片尺寸再进行调整，所以加载过程中仍然会撑破。而Qzone日志的图片在此进行了改进，onload完毕后才显示原图。我以前用onload写过一个小例子：http://www.planeart.cn/?p=1022 通过imgReady可以跨浏览器在dom ready就可…...
2024/4/25 3:09:23
王者荣耀如何修改未来外勤通夜神模拟器虚拟定位怎么清除
原理很简单： onmouseover、onmouseout执行业务代码时使用setTimeout进行延时，第二次触发的时候先清除掉前面的setTimeout。原理复制代码代码如下: var timer; document.getElementById(test).onmouseover = function () { clearTimeout(timer); timer = setTimeout(functi…...
2024/4/14 14:17:39
小米手机不能虚拟定位6
尽管我还没使用它去做一些尝试性的测试，但从这里可以看到它的确对js作了美化的工作。也许有人认为if语句就那么简单，能优化到什么程度？但是看看以下的几种方式，你也许会改变看法。一、使用常见的三元操作符复制代码代码如下: if (foo) bar(); else baz(); ==> foo?b…...
2024/4/25 12:33:25
苹果能装的虚拟定位软件
例如：复制代码代码如下: $(#foo).slideUp(300).delay(800).fadeIn(400);// 在.slideUp() 和 .fadeIn()之间延时800毫秒。 hover是否可以设计一个延时器呢？答案是肯定的。延时操作目的是为了防止用户误触发事件，一般情况下鼠标指针小于150毫秒的停留时间都可以被忽略。其实…...
2024/4/27 10:37:19
如何躲开手机游戏检测捉妖虚拟定位避免封号
有序列表ol漂亮分页样式 a { color:#000;} .pagination{ overflow:hidden; margin:0; padding:10px 10px 6px 10px; border-top:1px solid #f60; _zoom:1; } .pagination *{ display:inline; float:left; margin:0; padding:0; font-size:12px; } .pagination i…...
2024/4/24 7:30:52
苹果怎么给钉钉一个虚拟定位》
W3C标准推荐的语法是通过document文档对象获取DOM树内的内的某个元素，常见的方法有getElementById（）、getElementsByName（）、getElementsByTagName（），他们的作用分别通过id属性、name属性/标签名称返回单个节点或节点集合。复制代码代码如下: <!DOCTYPE html PUBL…...
2024/4/14 14:17:36
滴滴优位虚拟定位器
不过请仔细对比一下，你会发现其中差别还是很大的。Java HashMap的key是Object类型，所以可以任何类型的参数，而JS的key只能是字符串或是数字。你也许会说，obj={};map[obj]=1;这段代码传入了既不是数字也不是字符的key，但也没发生错误啊。那是因为解释器将obj对象通过内置的…...
2024/4/14 14:17:35
电脑虚拟定位怎么设置
1, 参数是一个对象，核心js对象(native ECMAScript object)或宿主对象(host object)，那么将直接返回该对象。其生成的对象构造器仍然是所传参数对象的构造器。这样造成的后果是虽然该对象是new Object，但其constructor不一定是Object。复制代码代码如下:function Person()…...
2024/4/21 1:50:20
阴阳师ios虚拟定位漫展
复制代码代码如下: var evt = window.event || arguments[0]; 下面分三种添加事件的方式讨论，你也许会看到以前没有看到过的获取方式。 1，第一种添加事件的方式，直接在html的属性中写JS代码复制代码代码如下: <div onclick="alert(4);">Div1 Element<…...
2024/4/17 21:40:53
小米红米6怎么打开红米5 plus怎么能安卓4.4i讯飞可以虚拟定位吗
闭包演示 p {background:gold;} function init() { var pAry = document.getElementsByTagName("p"); for( var i=0; i 产品 0 产品 1 产品 2 产品 3 产品 4 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]以上场景是初学者经常碰到的。即获取HTML元素集合，循…...
2024/4/14 14:17:32
百度地图上安装虚拟定位软件
给一个HTML元素设置css属性，如复制代码代码如下: var head= document.getElementById("head"); head.style.width = "200px"; head.style.height = "70px"; head.style.display = "block"; 这样写太罗嗦了，为了简单些写个工具函数…...
2024/4/14 14:17:31
虚拟定位精灵2.4.3破解
测试代码：IE6/7/8下cssText返回值少了分号 TEST var div = document.getElementsByTagName(div); alert(div[0].style.cssText); [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]各浏览器输出如下IE6/7/8 :IE9/Firefox/Chrome/Safari/Opera :可以看到IE6/7/8中少了分号。使用…...
2024/4/27 16:24:23
苹果版QQ手机设置虚拟定位在哪
当然,在请求时无法统计HTTP头部的长度,所以当请求数据包长度在最大传输单元临界点时,额外的HTTP头可以导致IP分组,因此存在一定的误差.(2009/6/21) 在线演示：http://demo.jb51.net/js/2011/ping/核心代码：复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTM…...
2024/4/24 19:06:49
老公不接电话如何使用安卓华为安装虚拟定位那个最好用
Code: var ie = !+"\v1"; 仅仅需要7bytes！参见这篇文章，《32 bytes, ehr ... 9, ehr ... 7!!! to know if your browser is IE》，讲述外国人是如何把IE的判定从32 bytes一步步缩简成7 bytes!的故事但这纪录今年1月8日被一个俄国人打破了，现在只要6 bytes!它利用…...
2024/4/14 14:17:29
anywhere虚拟定位2017
复制代码代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="gbk"> <title>事实证明cssText在多数浏览器中性能较高</title> </head> <body> <input type="button" value="测试1" on…...
2024/4/14 14:17:27
手机gps坏了虚拟定位吗
jProviderData 复制代码代码如下: /// <reference path="jUtil.js" /> $j = jQuery.noConflict(); (function ($j) { $j.providerData={ defaultSettings: { select_Span_Items: false, select_TD_Items: false, select_LI_Items: false }, init:function(opt…...
2024/4/14 14:17:26
坚果pro lua 阴阳师荣耀6虚拟定位软件
Html：复制代码代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content=&q…...
2024/4/14 14:17:25

定位不能用虚拟定位吗

相关文章

最新文章