event.dataTransfer는 setTimeout 함수 내에서 항목을 잃습니다.

Question

누군가이 문제가 발생하는 이유를 설명해 주실 수 있습니까? 이것은 ondrop 처리기에 있습니다.

왜 타이머 내부의 값이 손실됩니까?

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); 

하더라도 이는에서는 setTimeout 타이머 실행, 그래서 window 될 것이다 때 함수를 호출하는 this이 같은 this 수 없음을 수

var items, _items, 
    _this = this; 

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

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

Answer 1

그런데 문제 솔기를 작동하지 않습니다 따라서 올바른 동작을 원할 경우 변경해야합니다.

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); 
... 

내가 제대로 dataTransfer 객체가 "드래그 데이터 저장소"와 관련된 HTML5 Drag and drop을 읽고 있어요 경우에만 해당

Answer 2

희망이 도움 드래그 앤 드랍의 지속 시간, 다른 시간은 분리되거나 사용 불가능한 상태이며, 실제로는 items이 비어 있음을 의미합니다.

따라서 처리기 내에서만 사용할 수 있습니다. 항목을 복사해야하는 항목을 그대로 유지해야하는 경우 (예상대로 항목 복사가 잘되지 않을 수도 있지만, 곧바로 필요한 데이터를 추출하십시오.)