जब Chrome में एक टैब निष्क्रिय होता है तो मैं कैसे सेट कर सकता हूं।

Question

मेरे पास setIntervalएक सेकंड में 30 बार कोड का एक टुकड़ा चल रहा है । यह बहुत अच्छा काम करता है, हालाँकि जब मैं किसी अन्य टैब का चयन करता हूं (ताकि मेरे कोड वाला टैब निष्क्रिय हो जाए), setIntervalकिसी कारण से निष्क्रिय अवस्था में सेट हो जाता है।

मैंने यह सरलीकृत परीक्षण मामला बनाया ( http://jsfiddle.net/7f6DX/3/ ):

var $div = $('div');
var a = 0;

setInterval(function() {
    a++;
    $div.css("left", a)
}, 1000 / 30);

यदि आप इस कोड को चलाते हैं और फिर दूसरे टैब पर स्विच करते हैं, तो कुछ सेकंड प्रतीक्षा करें और वापस जाएं, एनीमेशन उस बिंदु पर जारी रहता है जब आप दूसरे टैब पर स्विच करते थे। यदि टैब निष्क्रिय है तो एनीमेशन 30 सेकंड में दूसरी बार नहीं चल रहा है। यह पुष्टि की जा सकती है कि setIntervalफ़ंक्शन को प्रत्येक सेकंड कहा जाता है - यह उस समय की गणना है, जब टैब निष्क्रिय होता है, तो यह 30 नहीं बल्कि सिर्फ 1 या 2 होगा।

मुझे लगता है कि यह डिज़ाइन द्वारा किया गया है ताकि प्रदर्शन में सुधार हो, लेकिन क्या इस व्यवहार को अक्षम करने का कोई तरीका है? यह वास्तव में मेरे परिदृश्य में एक नुकसान है।

Comments

शायद नहीं, जब तक कि आपने इसे Dateवस्तु के साथ हैक नहीं किया है कि वास्तव में क्या समय बीत चुका है।

— एलेक्स

क्या आप अपने परिदृश्य के बारे में अधिक बता सकते हैं? शायद यह ऐसा नुकसान नहीं है।

— जेम्स

आपका मतलब है कि यह कोड परिवर्तन है, और जो आप पूछते हैं वह भी यहां चर्चा की गई है - ओलिवर मैटोस ने कुछ काम आस-पास पोस्ट किए हैं, शायद यह आपके मामले में भी वैध है?

— शैडो विजार्ड ईयर फॉर यू

यह एनीमेशन की शुरुआत के बाद से वास्तविक समय की मात्रा पर कुंजी एनिमेशन के लिए लगभग हमेशा सबसे अच्छा है, जैसा कि इससे पढ़ा गया है Date। इतना है कि जब अंतराल जल्दी (इस या अन्य कारणों के लिए) आग नहीं है, एनीमेशन सिर्फ झटका नहीं धीमा हो जाता है।

— मई'11

प्रश्न का शीर्षक मुझे यहां ले गया, हालांकि मेरा उपयोग मामला थोड़ा अलग था - मुझे टैब की निष्क्रियता की परवाह किए बिना एक ताज़ा टोकन की आवश्यकता थी। यदि वह आपके लिए प्रासंगिक है तो यहां

— इरेज़ कोहेन

Answer 1

अधिकांश ब्राउज़रों पर निष्क्रिय टैब में प्राथमिकता कम होती है और यह जावास्क्रिप्ट टाइमर को प्रभावित कर सकता है।

यदि आपके संक्रमण के मूल्यों की गणना प्रत्येक अंतराल पर निश्चित वेतन वृद्धि के बजाय फ़्रेम के बीच वास्तविक समय का उपयोग करके की जाती है, तो आप न केवल इस समस्या को हल करते हैं, बल्कि अनुरोध का उपयोग करके एक स्मूथ एनीमेशन भी प्राप्त कर सकते हैं। क्योंकि यह 60fps तक मिल सकता है यदि प्रोसेसर नहीं है बहुत व्यस्त।

यहाँ एक वैनिला जावास्क्रिप्ट उदाहरण का उपयोग कर एक एनिमेटेड संपत्ति संक्रमण है requestAnimationFrame:

var target = document.querySelector('div#target')
var startedAt, duration = 3000
var domain = [-100, window.innerWidth]
var range = domain[1] - domain[0]

function start() {
  startedAt = Date.now()
  updateTarget(0)
  requestAnimationFrame(update)
}

function update() {
  let elapsedTime = Date.now() - startedAt

  // playback is a value between 0 and 1
  // being 0 the start of the animation and 1 its end
  let playback = elapsedTime / duration

  updateTarget(playback)
  
  if (playback > 0 && playback < 1) {
  	// Queue the next frame
  	requestAnimationFrame(update)
  } else {
  	// Wait for a while and restart the animation
  	setTimeout(start, duration/10)
  }
}

function updateTarget(playback) {
  // Uncomment the line below to reverse the animation
  // playback = 1 - playback

  // Update the target properties based on the playback position
  let position = domain[0] + (playback * range)
  target.style.left = position + 'px'
  target.style.top = position + 'px'
  target.style.transform = 'scale(' + playback * 3 + ')'
}

start()

body {
  overflow: hidden;
}

div {
    position: absolute;
    white-space: nowrap;
}

<div id="target">...HERE WE GO</div>

---

पृष्ठभूमि कार्य के लिए (गैर- UI संबंधित)

@UpTheCreek टिप्पणी:

प्रस्तुति के मुद्दों के लिए ठीक है, लेकिन फिर भी कुछ चीजें हैं जिन्हें आपको चालू रखने की आवश्यकता है।

यदि आपके पास पृष्ठभूमि कार्य हैं जिन्हें दिए गए अंतराल पर ठीक से निष्पादित करने की आवश्यकता है, तो आप एचटीएमएल 5 वेब वर्कर्स का उपयोग कर सकते हैं । पर एक नज़र डालेंनीचे Möhre के उत्तर डालेंअधिक जानकारी के लिए ...

CSS बनाम JS "एनिमेशन"

इस समस्या और कई अन्य को जावास्क्रिप्ट आधारित एनिमेशन के बजाय CSS बदलाव / एनिमेशन का उपयोग करके टाला जा सकता है जो काफी उपरि जोड़ता है। मैं आपको इस jQuery प्लगइन की सलाह दूंगा कि आप सीएसएस बदलावों से लाभ animate()उठाएं।

Comments

मैंने फायरफॉक्स 5 पर यह कोशिश की और 'सेटइंटरवा' तब भी चलता है, जब टैब फोकस में नहीं होता है। 'SetInterval' में मेरा कोड 'चेतन ()' का उपयोग करके एक स्लाइडशो स्लाइड करता है। ऐसा लगता है कि एनीमेशन फायरफॉक्स द्वारा पंक्तिबद्ध है। जब मैं टैब पर वापस जाता हूं, तो फायरफॉक्स कतार को एक के बाद एक तेजी से आगे बढ़ाता है, जिसके परिणामस्वरूप कतार खाली होने तक तेजी से चलती है।

— nthpixel

@nthpixel जोड़ देगा .stop (www के जवाब के अनुसार) tat स्थिति में मदद करें (हर बार जब यह पिछले एनिमेशन को साफ़ करेगा)

@gordatron - .stop मेरी स्थिति में मदद नहीं करता है। समान व्यवहार। और मैं अभी FireFox 6.0.2 पर हूं। मुझे आश्चर्य है कि यह जिस तरह से jQuery के .animate है।

— nthpixel 19

@cvsguimaraes - हाँ अच्छी बात है। क्या आपको इस बात का कुछ भी पता है कि बैकग्राउंड टैब में भी वेब वर्कर्स को गारंटी देने वाले स्पेसिफिकेशन्स चलेंगे? मुझे इस बात की चिंता है कि ब्राउज़र विक्रेता मनमाने ढंग से भविष्य में भी इन्हें बंद करने का फैसला करेंगे ...

— UpTheCreek

मैं पिछली कॉल के अंत के बजाय शुरू होने केbefore = now; बाद से गुजरे हुए समय को पढ़ने के लिए कोड की अगली-अंतिम पंक्ति को बदल दूंगा । यह आमतौर पर चीजों को एनिमेट करते समय आप क्या चाहते हैं। जैसा कि अब है, यदि अंतराल फ़ंक्शन का निष्पादन 15ms लेता है, तो अगली बार इसे (जब टैब सक्रिय होता है) कहा जाता है तो 35ms (50ms के बजाय जो अंतराल होता है) देगा। elapsedTime

— जोनास बर्लिन

Answer 2

मैं ऑडियो फेडिंग और HTML5 प्लेयर के साथ एक ही समस्या में भाग गया। टैब निष्क्रिय होने पर यह अटक गया। इसलिए मुझे पता चला कि एक WebWorker को बिना किसी अंतराल के अंतराल / टाइमआउट का उपयोग करने की अनुमति है। मैं इसका उपयोग मुख्य जावास्क्रिप्ट के लिए "टिक" पोस्ट करने के लिए करता हूं।

WebWorkers कोड:

var fading = false;
var interval;
self.addEventListener('message', function(e){
    switch (e.data) {
        case 'start':
            if (!fading){
                fading = true;
                interval = setInterval(function(){
                    self.postMessage('tick');
                }, 50);
            }
            break;
        case 'stop':
            clearInterval(interval);
            fading = false;
            break;
    };
}, false);

मुख्य जावास्क्रिप्ट:

var player = new Audio();
player.fader = new Worker('js/fader.js');
player.faderPosition = 0.0;
player.faderTargetVolume = 1.0;
player.faderCallback = function(){};
player.fadeTo = function(volume, func){
    console.log('fadeTo called');
    if (func) this.faderCallback = func;
    this.faderTargetVolume = volume;
    this.fader.postMessage('start');
}
player.fader.addEventListener('message', function(e){
    console.log('fader tick');
    if (player.faderTargetVolume > player.volume){
        player.faderPosition -= 0.02;
    } else {
        player.faderPosition += 0.02;
    }
    var newVolume = Math.pow(player.faderPosition - 1, 2);
    if (newVolume > 0.999){
        player.volume = newVolume = 1.0;
        player.fader.postMessage('stop');
        player.faderCallback();
    } else if (newVolume < 0.001) {
        player.volume = newVolume = 0.0;
        player.fader.postMessage('stop');
        player.faderCallback();
    } else {
        player.volume = newVolume;
    }
});

Comments

साफ! अब आशा करते हैं कि वे इसे "ठीक" नहीं करेंगे।

— pvvdb

महान! इस दृष्टिकोण का उपयोग तब किया जाना चाहिए जब आपको ठीक से काम करने के लिए टाइमर की आवश्यकता हो लेकिन कुछ एनीमेशन मुद्दों को ठीक करने के लिए नहीं!

— कॉन्स्टेंटिन स्मोलिनिन

मैंने इसके साथ एक महान मेट्रोनोम बनाया। दिलचस्प है कि सभी सबसे लोकप्रिय html5 ड्रम मशीनें इस पद्धति का उपयोग नहीं करती हैं और इसके बजाय अवर नियमित सेटटाइमआउट का उपयोग करती हैं। skyl.github.io/grimoire/fretboard-prototyp.html - क्रोम या सफारी इसे अभी सबसे अच्छा खेलता है।

— स्काईलार सावलैंड

अगर डेवलपर इसका दुरुपयोग करना शुरू कर देते हैं तो वे इसे "ठीक" कर देंगे। दुर्लभ अपवादों के साथ, आपका ऐप इतना महत्वपूर्ण नहीं है कि उपयोगकर्ता अनुभव में कुछ न्यूनतम सुधार प्रदान करने के लिए पृष्ठभूमि में संसाधनों का उपभोग करना चाहिए।

— गनचर्स

Answer 3

वेब वर्कर्स का उपयोग करने के लिए एक समाधान है (जैसा कि पहले उल्लेख किया गया है), क्योंकि वे अलग-अलग प्रक्रिया में चलते हैं और धीमा नहीं होते हैं

मैंने एक छोटी सी स्क्रिप्ट लिखी है जिसे आपके कोड में बदलाव किए बिना उपयोग किया जा सकता है - यह बस सेटटाइमआउट, क्लियरटाइम, सेटइंटरवल, क्लियरइंटरवल के कार्यों को ओवरराइड करता है।

बस अपने सभी कोड से पहले इसे शामिल करें।

अधिक जानकारी यहाँ

Comments

मैंने एक प्रोजेक्ट पर इसका परीक्षण किया है जिसमें पुस्तकालय भी शामिल हैं जो टाइमर का उपयोग कर रहे थे (इसलिए मैं खुद श्रमिकों को लागू नहीं कर सका)। इसने एक जादू की तरह काम किया। इस लाइब्रेरी के लिए धन्यवाद

— अरनौद

@ ruslan-tushov ने इसे केवल 60 क्रोम पर आज़माया, लेकिन ऐसा लगता है कि इसका असर बिल्कुल भी नहीं हुआ है ... मैं कई सेटटाइमआउट से कुछ फ़ंक्शंस कॉल कर रहा हूं, जो डोम एनिमेशन को css एनिमेशन से जोड़ते हैं / हटाते हैं, और मैं उन्हें फ्रीज करता हूँ टैब स्विच के बाद कुछ देरी से (सामान्य रूप से प्लगइन्स के बिना)

— neoDev

@neoDev क्या आप किसी अन्य जावास्क्रिप्ट से पहले HackTimer.js (या HackTimer.min.js) लोड करते हैं?

— डेविड पट्टी

@neoDev यह वास्तव में अजीब लगता है, क्योंकि मैंने हाल ही में कोशिश की थी और यह काम करता है

— Davide Patti

@ डर्डनपी हाँ मैंने भी इसे किसी अन्य जावास्क्रिप्ट से पहले डालने की कोशिश की। शायद इसलिए कि मैं सीएसएस एनिमेशन का उपयोग कर रहा था? मुझे यह भी याद है कि मैंने वेबवर्कर्स की कोशिश की थी, लेकिन बिना भाग्य के

— neoDev

Answer 4

बस यह करें:

var $div = $('div');
var a = 0;

setInterval(function() {
    a++;
    $div.stop(true,true).css("left", a);
}, 1000 / 30);

निष्क्रिय ब्राउज़र टैब कुछ setIntervalया setTimeoutफ़ंक्शंस को बफर करता है।

stop(true,true) सभी बफ़र्ड ईवेंट्स को रोक देगा और तुरंत अंतिम एनीमेशन पर अमल करेगा।

window.setTimeout()विधि अब निष्क्रिय टैब में प्रति सेकंड से अधिक नहीं एक समय समाप्ति भेजने के लिए clamps। इसके अलावा, यह अब HTML5 विनिर्देश द्वारा अनुमत सबसे छोटे मान के लिए नेस्टेड टाइमआउट को क्लैम्प करता है: 4 एमएस (10 एमएस के बजाय इसे क्लैंप करने के लिए उपयोग किया जाता है)।

Comments

यह जानना अच्छा है - उदाहरण के लिए अजाक्स अपडेट के लिए जहां नवीनतम डेटा हमेशा सही होता है - लेकिन पोस्ट किए गए प्रश्न के लिए इसका मतलब यह नहीं होगा कि एनीमेशन को काफी धीमा कर दिया गया था / "a" के रूप में रोका गया था जो कि उचित संख्या में वृद्धि नहीं की गई थी ?

Answer 5

मुझे लगता है कि इस समस्या के बारे में सबसे अच्छी समझ इस उदाहरण में है: http://jsfiddle.net/TAHDb/

मैं यहाँ एक साधारण बात कर रहा हूँ:

1 सेकंड का अंतराल रखें और हर बार पहले स्पैन को छिपाएं और इसे अंतिम तक ले जाएं, और दूसरा स्पैन दिखाएं।

यदि आप पृष्ठ पर बने रहते हैं तो यह काम करता है जैसा कि माना जाता है। लेकिन अगर आप कुछ सेकंड के लिए टैब छिपाते हैं, तो जब आप वापस आते हैं तो आपको एक बेकार चीज दिखाई देगी।

इसकी सभी घटनाओं की तरह जो उस समय निष्क्रिय नहीं थीं जब आप निष्क्रिय थे अब 1 समय में सभी को पूरा कर लेंगे। इसलिए कुछ सेकंड के लिए आपको एक्स इवेंट्स पसंद आएंगे। वे इतनी जल्दी हैं कि एक बार में सभी 6 स्पैन को देखना संभव है।

तो यह सीम क्रोम केवल घटनाओं को विलंबित करता है, इसलिए जब आप वापस आते हैं तो सभी घटनाएं घटेंगी, लेकिन एक ही बार में ...

एक व्यावहारिक अनुप्रयोग यह एक साधारण स्लाइड शो के लिए इस महासागर था। चित्र होने की संख्या की कल्पना करें, और यदि उपयोगकर्ता टैब के साथ छिपा रहता है जब वह वापस आया तो वह सभी imgs को तैरते हुए देखेगा, पूरी तरह से मेस।

इसे ठीक करने के लिए स्टॉप (सही, सत्य) का उपयोग करें जैसे पिम्पडब ने बताया। थीस इवेंट कतार को साफ कर देगा।

Comments

वास्तव में इसका requestAnimationFrameउपयोग उस jQuery के कारण है। कुछ विचित्रताओं के कारण इसमें (जैसे यह) था, उन्होंने इसे हटा दिया। 1.7 में आपको यह व्यवहार दिखाई नहीं देता है। jsfiddle.net/TAHDb/1 । क्योंकि अंतराल एक बार प्रति सेकंड है यह वास्तव में मेरे द्वारा पोस्ट किए गए मुद्दे को प्रभावित नहीं करता है, क्योंकि निष्क्रिय टैब के लिए अधिकतम भी एक बार प्रति सेकंड है - ताकि कोई अंतर न हो।

— pimvdb

Answer 6

मेरे लिए यहां दूसरों की तरह पृष्ठभूमि में ऑडियो चलाना महत्वपूर्ण नहीं है, मेरी समस्या यह थी कि मेरे पास कुछ एनिमेशन थे और जब आप अन्य टैब में थे और उनके वापस आने पर वे पागलों की तरह काम करते थे। मेरा समाधान इन एनिमेशनों को अंदर रख रहा था अगर यह निष्क्रिय टैब को रोक रहा है :

if (!document.hidden){ //your animation code here }

इसके लिए धन्यवाद कि मेरा एनीमेशन केवल तभी चल रहा था जब टैब सक्रिय था। मुझे उम्मीद है कि यह मेरे मामले में किसी की मदद करेगा।

Comments

मैं इसे इस तरह से उपयोग करता हूं setInterval(() => !document.hidden && myfunc(), 1000)और यह पूरी तरह से काम करता है

— दीदी बेयर

Answer 7

जब टैब निष्क्रिय हो या काम करता है तो दोनों setIntervalऔर requestAnimationFrameकाम नहीं करते लेकिन सही समय पर नहीं। एक समाधान समय की घटनाओं के लिए किसी अन्य स्रोत का उपयोग करना है। उदाहरण के लिए वेब सॉकेट या वेब वर्कर दो इवेंट स्रोत होते हैं जो टैब निष्क्रिय होने पर ठीक काम करते हैं। तो अपने सभी कोड को एक वेब कार्यकर्ता में स्थानांतरित करने की आवश्यकता नहीं है, बस कार्यकर्ता को समय घटना स्रोत के रूप में उपयोग करें:

// worker.js
setInterval(function() {
    postMessage('');
}, 1000 / 50);

।

var worker = new Worker('worker.js');
var t1 = 0;
worker.onmessage = function() {
    var t2 = new Date().getTime();
    console.log('fps =', 1000 / (t2 - t1) | 0);
    t1 = t2;
}

इस नमूने का jsfiddle लिंक ।

Comments

"सिर्फ कार्यकर्ता एक समय घटना स्रोत के रूप में उपयोग करें" विचार के लिए धन्यवाद

— प्रोमोद संपत एलविटीगाला

Answer 8

भारी रुस्लान टुशोव के पुस्तकालय से प्रभावित, मैंने अपनी खुद की छोटी लाइब्रेरी बनाई है । बस स्क्रिप्ट जोड़ें <head>और यह पैच setIntervalऔर setTimeoutउन लोगों के साथ जो उपयोग करेंगे WebWorker।

Comments

बस इसे क्रोम 60 पर आजमाया गया है, लेकिन इसका बिल्कुल भी असर नहीं होता है ... मैं कई सेट टाइमआउट से कुछ कार्यों को कॉल कर रहा हूं, सीएमएस एनिमेशन द्वारा एनिमेटेड होने वाले डोम में तत्वों को जोड़ने / हटाने के लिए, और मैं उन्हें कुछ देरी के बाद फ्रीज करता हूं टैब स्विच (प्लगइन्स के बिना हमेशा की तरह)

— neoDev

मैं इसे क्रोम 60 के साथ उपयोग करता हूं। क्या आप एक डेमो बना सकते हैं और इसे गीथूब मुद्दों पर पोस्ट कर सकते हैं?

— मारि

Answer 9

एक ऑडियो फ़ाइल बजाना समय के लिए पूर्ण पृष्ठभूमि जावास्क्रिप्ट प्रदर्शन सुनिश्चित करता है

मेरे लिए, यह सबसे सरल और कम से कम घुसपैठ समाधान था - एक बेहोश / लगभग-खाली ध्वनि खेलने के अलावा, कोई अन्य संभावित दुष्प्रभाव नहीं हैं

आप यहाँ विवरण पा सकते हैं: https://stackoverflow.com/a/51191818/914546

(अन्य उत्तरों से, मैं देखता हूं कि कुछ लोग ऑडियो टैग के विभिन्न गुणों का उपयोग करते हैं, मुझे आश्चर्य है कि क्या पूर्ण प्रदर्शन के लिए ऑडियो टैग का उपयोग करना संभव है, वास्तव में बिना कुछ खेले)

Answer 10

ध्यान दें: यह समाधान उपयुक्त नहीं है यदि आप अपने अंतराल को पृष्ठभूमि पर काम करते हैं, उदाहरण के लिए, ऑडियो खेल रहे हैं या ... लेकिन यदि आप अपने एनीमेशन के बारे में भ्रमित हैं, तो अपने पृष्ठ पर वापस आने पर अपने काम को ठीक से काम नहीं कर रहे हैं (टैब) एक अच्छा समाधान।

इस लक्ष्य को प्राप्त करने के कई तरीके हैं, हो सकता है कि "वेबवॉकर्स" सबसे मानक हो लेकिन , निश्चित रूप से, यह सबसे आसान और आसान नहीं है, खासकर यदि आपके पास पर्याप्त समय नहीं है, तो आप इस तरह से कोशिश कर सकते हैं:

►BASIC अवधारणा:

1- अपने अंतराल (या एनीमेशन) के लिए एक नाम बनाएँ और अपना अंतराल (एनीमेशन) सेट करें, इसलिए यह तब चलेगा जब उपयोगकर्ता पहली बार आपका पेज खोलेगा: var interval_id = setInterval(your_func, 3000);

2- $(window).focus(function() {});और $(window).blur(function() {});आप clearInterval(interval_id)हर बार ब्राउज़र (टैब) को निष्क्रिय कर सकते हैं और अपने अंतराल (एनीमेशन) को फिर से खोल सकते हैं (ब्राउज़र) टैब (टैब) फिर से सक्रिय होगाinterval_id = setInterval();

नमूना कोड:

var interval_id = setInterval(your_func, 3000);

$(window).focus(function() {
    interval_id = setInterval(your_func, 3000);
});
$(window).blur(function() {
    clearInterval(interval_id);
    interval_id = 0;
});

Answer 11

यह काफी पुराना सवाल है लेकिन मुझे उसी मुद्दे का सामना करना पड़ा।
यदि आप क्रोम पर अपना वेब चलाते हैं, तो आप क्रोम 57 में इस पोस्ट बैकग्राउंड टैब के माध्यम से पढ़ सकते हैं ।

मूल रूप से अंतराल टाइमर चल सकता है अगर यह टाइमर बजट से बाहर नहीं चला है।
बजट की खपत टाइमर के अंदर कार्य के सीपीयू समय उपयोग पर आधारित है।
अपने परिदृश्य के आधार पर, मैं वीडियो को कैनवास पर ले जाता हूं और वेबआरटीसी को परिवहन करता हूं।
Webrtc वीडियो कनेक्शन अपडेट होता रहेगा यहां तक ​​कि टैब भी निष्क्रिय है।

हालाँकि आपको setIntervalइसके बजाय उपयोग करना होगा requestAnimationFrame।
हालांकि यह यूआई प्रतिपादन के लिए अनुशंसित नहीं है।

सुनना बेहतर होगा visibilityChange घटना और उसके अनुसार मेचनवाद को बदलें।

इसके अलावा, आप @ कान-सोरल की कोशिश कर सकते हैं और यह प्रलेखन के आधार पर काम करना चाहिए।

Answer 12

यहाँ मेरा मोटा समाधान है

(function(){
var index = 1;
var intervals = {},
    timeouts = {};

function postMessageHandler(e) {
    window.postMessage('', "*");

    var now = new Date().getTime();

    sysFunc._each.call(timeouts, function(ind, obj) {
        var targetTime = obj[1];

        if (now >= targetTime) {
            obj[0]();
            delete timeouts[ind];
        }
    });
    sysFunc._each.call(intervals, function(ind, obj) {
        var startTime = obj[1];
        var func = obj[0];
        var ms = obj[2];

        if (now >= startTime + ms) {
            func();
            obj[1] = new Date().getTime();
        }
    });
}
window.addEventListener("message", postMessageHandler, true);
window.postMessage('', "*");

function _setTimeout(func, ms) {
    timeouts[index] = [func, new Date().getTime() + ms];
    return index++;
}

function _setInterval(func, ms) {
    intervals[index] = [func, new Date().getTime(), ms];
    return index++;
}

function _clearInterval(ind) {
    if (intervals[ind]) {
        delete intervals[ind]
    }
}
function _clearTimeout(ind) {
    if (timeouts[ind]) {
        delete timeouts[ind]
    }
}

var intervalIndex = _setInterval(function() {
    console.log('every 100ms');
}, 100);
_setTimeout(function() {
    console.log('run after 200ms');
}, 200);
_setTimeout(function() {
    console.log('closing the one that\'s 100ms');
    _clearInterval(intervalIndex)
}, 2000);

window._setTimeout = _setTimeout;
window._setInterval = _setInterval;
window._clearTimeout = _clearTimeout;
window._clearInterval = _clearInterval;
})();

Comments

postMessageHandlerअपनी ही घटना यह से निपटने है, जिससे अनंत लूप कि यूआई अवरुद्ध नहीं कर रहा है होने का आह्वान। और जब यह असीम रूप से लूपिंग होता है, तो यह प्रत्येक ईवेंट-हैंडलिंग के साथ जांच कर रहा है कि क्या चलाने के लिए कोई टाइमआउट या अंतराल फ़ंक्शन है।

— foobored

Answer 13

मैं ऑडियो टैग का उपयोग करके और अपने ऑनटाइमअपडेट इवेंट को संभालने के लिए कम से कम 250ms में अपने कॉलबैक फ़ंक्शन को कॉल करने में सक्षम था। एक सेकंड में इसका 3-4 बार कॉल किया गया। यह एक सेकंड के लैगिंग सेटटाइमआउट से बेहतर है