event.dataTransfer在setTimeout函數內部丟失它的項目

有人可以解釋爲什麼會發生這種情況。這是在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);

來源

2013-05-22 Harry

嗯，你的問題接縫是正在調用的函數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); 
...

希望它可以幫助

來源

2013-05-22 07:42:45 intuitivepixel

嘿，謝謝。它仍然發生 – Harry

編輯我的答案直接保留項目，仍然是相同的結果？ – intuitivepixel

同樣的事情發生 – Harry

如果我讀HTML5 Drag and drop正確dataTransfer對象與「拖拽數據存儲」相關聯只爲拖放的持續時間，其他時間被解除或關閉，實際上意味着items爲空。

所以，event.dataTransfer只能從ondrop處理程序中使用，如果你需要保留超出的項目，你需要複製它們（雖然我不知道複製的項目，如預期會的工作，你可能需要以提取您需要的數據。）

來源

2013-05-22 08:11:27

嗨，謝謝你。這一切都像你所說的那樣在現場管理員內部發生。超時功能在handeler裏面。 – Harry

我的意思是執行時間。「ondrop」處理程序被調用，並且一旦處理函數返回'event.dataTransfer'，可能會重置。 –

event.dataTransfer在setTimeout函數內部丟失它的項目

回答

相關問題