주어진 창에서 모든 시간 초과를 지우는 방법이 있습니까? 시간 초과가 window
개체의 어딘가에 저장되어 있다고 가정 하지만 확인할 수 없습니다.
모든 크로스 브라우저 솔루션을 환영합니다.
주어진 창에서 모든 시간 초과를 지우는 방법이 있습니까? 시간 초과가 window
개체의 어딘가에 저장되어 있다고 가정 하지만 확인할 수 없습니다.
모든 크로스 브라우저 솔루션을 환영합니다.
답변:
창 개체에는 없지만 (afaik) 연속 정수인 ID가 있습니다.
따라서 다음과 같이 모든 시간 초과를 지울 수 있습니다.
var id = window.setTimeout(function() {}, 0);
while (id--) {
window.clearTimeout(id); // will do nothing if no timeout with id is present
}
이 작업을 수행하는 가장 쉬운 방법은 모든 setTimeout
식별자를 하나의 배열에 저장 clearTimeout()
하는 것입니다. 여기서 모든 식별자를 쉽게 반복 할 수 있습니다 .
var timeouts = [];
timeouts.push(setTimeout(function(){alert(1);}, 200));
timeouts.push(setTimeout(function(){alert(2);}, 300));
timeouts.push(setTimeout(function(){alert(3);}, 400));
for (var i=0; i<timeouts.length; i++) {
clearTimeout(timeouts[i]);
}
이전 IE를 위해 개발하는 사람에게 유용 할 수있는 Pumbaa80의 답변에 추가되었습니다 .
예, 모든 주요 브라우저는 시간 초과 ID를 연속 정수로 구현 합니다 (사양에 필요하지 않음 ). 시작 번호는 브라우저마다 다릅니다. Opera, Safari, Chrome 및 IE> 8은 탭 새로 고침을 통해 마술처럼 저장되는 임의의 숫자에서 1, 2의 Gecko 기반 브라우저 및 IE <= 8에서 시간 초과 ID를 시작하는 것 같습니다. 직접 발견 할 수 있습니다 .
IE <= 8에서는 while (lastTimeoutId--)
주기가 8 자리 이상으로 실행될 수 있으며 " 이 페이지의 스크립트로 인해 Internet Explorer가 느리게 실행 됩니다."라는 메시지가 표시됩니다. 따라서 타임 아웃 ID를 모두 저장할 수 없거나 window.setTimeout 을 재정의 하지 않으려면 페이지의 첫 번째 타임 아웃 ID를 저장하고 그 때까지 타임 아웃을 지우는 것을 고려할 수 있습니다.
초기 페이지로드시 코드 실행 :
var clearAllTimeouts = (function () {
var noop = function () {},
firstId = window.setTimeout(noop, 0);
return function () {
var lastId = window.setTimeout(noop, 0);
console.log('Removing', lastId - firstId, 'timeout handlers');
while (firstId != lastId)
window.clearTimeout(++firstId);
};
});
그런 다음 원하는 횟수만큼 외래 코드에 의해 설정되었을 수있는 모든 보류중인 시간 제한을 지 웁니다.
타임 아웃 ID를 전역 배열에 저장하고 함수 호출을 창에 위임하는 메서드를 정의하는 방법은 무엇입니까?
GLOBAL={
timeouts : [],//global timeout id arrays
setTimeout : function(code,number){
this.timeouts.push(setTimeout(code,number));
},
clearAllTimeout :function(){
for (var i=0; i<this.timeouts.length; i++) {
window.clearTimeout(this.timeouts[i]); // clear all the timeouts
}
this.timeouts= [];//empty the id array
}
};
window.setTimeout
메서드 를 다시 작성 하고 시간 초과 ID를 저장해야합니다.
const timeouts = [];
const originalTimeoutFn = window.setTimeout;
window.setTimeout = function(fun, delay) { //this is over-writing the original method
const t = originalTimeoutFn(fn, delay);
timeouts.push(t);
}
function clearTimeouts(){
while(timeouts.length){
clearTimeout(timeouts.pop();
}
}
다른 스크립트 앞에 아래 코드 를 배치하면 원본 setTimeout
&에 대한 래퍼 함수가 생성됩니다 clearTimeout
.
모든 (보류중인) 시간 제한을 지울 수 있는 새 clearTimeouts
메서드가 window
Object에 추가됩니다 ( Gist 링크 ).
다른 답변 은 가능한 주장에 대한 완전한 지원이 부족 합니다 .
setTimeout
// isolated layer wrapper (for the local variables)
(function(_W){
var cache = [], // will store all timeouts IDs
_set = _W.setTimeout, // save original reference
_clear = _W.clearTimeout // save original reference
// Wrap original setTimeout with a function
_W.setTimeout = function( CB, duration, arg ){
// also, wrap the callback, so the cache reference will be removed
// when the timeout has reached (fired the callback)
var id = _set(function(){
CB.apply(null, arguments)
removeCacheItem(id)
}, duration || 0, arg)
cache.push( id ) // store reference in the cache array
// id reference must be returned to be able to clear it
return id
}
// Wrap original clearTimeout with a function
_W.clearTimeout = function( id ){
_clear(id)
removeCacheItem(id)
}
// Add a custom function named "clearTimeouts" to the "window" object
_W.clearTimeouts = function(){
console.log("Clearing " + cache.length + " timeouts")
cache.forEach(n => _clear(n))
cache.length = []
}
// removes a specific id from the cache array
function removeCacheItem( id ){
var idx = cache.indexOf(id)
if( idx > -1 )
cache = cache.filter(n => n != id )
}
})(window);
완전성을 위해 setTimeout
및 setInterval
.
브라우저는 둘 다에 대해 동일한 ID 풀을 사용할 수 있지만 ClearTimeout 및 clearInterval에 대한 답변 중 일부 는 동일합니까? , 동일한 기능 에 의존 clearTimeout
하고 clearInterval
수행하는 것이 안전한지 또는 각각의 타이머 유형에서만 작업하는 것이 안전한지 여부는 명확하지 않습니다 .
따라서 목표가 모든 시간 제한과 간격을 종료하는 것이라면 모든 구현을 테스트 할 수 없을 때 구현 전반에 걸쳐 약간 더 방어적일 수있는 구현이 있습니다.
function clearAll(windowObject) {
var id = Math.max(
windowObject.setInterval(noop, 1000),
windowObject.setTimeout(noop, 1000)
);
while (id--) {
windowObject.clearTimeout(id);
windowObject.clearInterval(id);
}
function noop(){}
}
이 기능을 사용하여 현재 창의 모든 타이머를 지울 수 있습니다.
clearAll(window);
또는 다음의 모든 타이머를 지우는 데 사용할 수 있습니다 iframe
.
clearAll(document.querySelector("iframe").contentWindow);
Typescript와 함께 Vue를 사용합니다.
private setTimeoutN;
private setTimeoutS = [];
public myTimeoutStart() {
this.myTimeoutStop();//stop All my timeouts
this.setTimeoutN = window.setTimeout( () => {
console.log('setTimeout');
}, 2000);
this.setTimeoutS.push(this.setTimeoutN)//add THIS timeout ID in array
}
public myTimeoutStop() {
if( this.setTimeoutS.length > 0 ) {
for (let id in this.setTimeoutS) {
console.log(this.setTimeoutS[id]);
clearTimeout(this.setTimeoutS[id]);
}
this.setTimeoutS = [];//clear IDs array
}
}
다른 모든 함수가 타이밍을 파생하는 글로벌 제한 시간을 사용하십시오. 이렇게하면 코드에 추상화가 추가되지만 모든 것이 더 빠르게 실행되고 관리하기 쉽습니다.
set_timeout
전역 함수 의 동작을 확장하려고 합니까? 예제 코드를 줄 수 있습니까?
이 정확한 문제를 해결하는 패키지를 방금 게시했습니다.
npm install time-events-manager
이를 통해 timeoutCollection
& intervalCollection
개체 를 통해 모든 시간 초과 및 간격을 볼 수 있습니다 . removeAll
컬렉션과 브라우저 모두에서 모든 타임 아웃 / 간격을 지우는 기능 도 있습니다 .