2013-05-22 36 views
0

有人可以解释为什么会发生这种情况。这是在ondrop处理程序event.dataTransfer在setTimeout函数内部丢失它的项目

为什么它失去了定时器内的值?

var _this = this; 

this.event = event; 

console.log(this.event.dataTransfer.items); 
## DataTransferItemList {0: DataTransferItem, length: 1, item: function, clear: function, add: function} 


setTimeout((function() { 
    return console.log(_this.event.dataTransfer.items); 
    ## DataTransferItemList {length: 0, item: function, clear: function, add: function} 

}), 100); 

即使这不工作

var items, _items, 
    _this = this; 

items = event.dataTransfer.items; 
_items = items; 

setTimeout((function() { 
    return console.log(_items); 
}), 100); 

回答

0

嗯,你的问题接缝是正在调用的函数this会不一样this当setTimeout的定时器运行,这将是window如此因此您需要更改它,如果您想要正确的行为:

取自here重写setTimeout和setInterval全局与此覆盖:

// Just place this lines in your javascript file 
// Enable the passage of the 'this' object through the JavaScript timers 
var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval; 
window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) { 
    var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2); 
    return __nativeST__(vCallback instanceof Function ? function() { 
    vCallback.apply(oThis, aArgs); 
    } : vCallback, nDelay); 
}; 

window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) { 
var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2); 
    return __nativeSI__(vCallback instanceof Function ? function() { 
    vCallback.apply(oThis, aArgs); 
    } : vCallback, nDelay); 
}; 

那么你的功能将如预期:

... 
console.log(this.event.dataTransfer); 
## DataTransferItemList {0: DataTransferItem, length: 1, item: function, clear: function, add: function} 

setTimeout((function() { 
    return console.log(this.event.dataTransfer); 
    ## DataTransferItemList {length: 0, item: function, clear: function, add: function} 
}), 100); 
... 

希望它可以帮助

+0

嘿,谢谢。它仍然发生 – Harry

+0

编辑我的答案直接保留项目,仍然是相同的结果? – intuitivepixel

+0

同样的事情发生 – Harry

2

如果我读HTML5 Drag and drop正确dataTransfer对象与“拖拽数据存储”相关联只为拖放的持续时间,其他时间被解除或关闭,实际上意味着items为空。

所以,event.dataTransfer只能从ondrop处理程序中使用,如果你需要保留超出的项目,你需要复制它们(虽然我不知道复制的项目,如预期会的工作,你可能需要以提取您需要的数据。)

+0

嗨,谢谢你。这一切都像你所说的那样在现场管理员内部发生。超时功能在handeler里面。 – Harry

+0

我的意思是执行时间。 “ondrop”处理程序被调用,并且一旦处理函数返回'event.dataTransfer',可能会重置。 –

相关问题