যখন কোনও ট্যাব ক্রমে নিষ্ক্রিয় থাকে তখন আমি কীভাবে সেটআইন্টারভাল কাজ করতে পারি?

Question

আমার কাছে setInterval30 সেকেন্ডে 30 বার কোড চলছে। এটি দুর্দান্ত কাজ করে, তবে যখন আমি অন্য ট্যাবটি নির্বাচন করি (যাতে আমার কোড সহ ট্যাবটি নিষ্ক্রিয় হয়ে যায়), setIntervalকোনও কারণে অলস অবস্থায় সেট করা থাকে।

আমি এই সরলীকৃত পরীক্ষার কেসটি তৈরি করেছি ( http://jsfiddle.net/7f6DX/3/ ):

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

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

আপনি যদি এই কোডটি চালান এবং তারপরে অন্য ট্যাবে স্যুইচ করেন, কয়েক সেকেন্ড অপেক্ষা করুন এবং ফিরে যান, অ্যানিমেশনটি অন্য পাতায় স্যুইচ করার সময় যখন ছিল তখনই এটি অবিরত থাকবে। সুতরাং ট্যাবটি নিষ্ক্রিয় থাকলে সেকেন্ডে 30 বার অ্যানিমেশন চলমান না isn't setIntervalফাংশনটি প্রতি সেকেন্ডে যে পরিমাণ সময় বলা হয় তা গণনা করে এটি নিশ্চিত করা যায় - ট্যাবটি নিষ্ক্রিয় থাকলে এটি 30 হবে না তবে কেবল 1 বা 2 হবে।

আমার ধারণা, পারফরম্যান্সের উন্নতি করতে ডিজাইনের মাধ্যমে এটি করা হয়েছে তবে এই আচরণটি অক্ষম করার কোনও উপায় আছে কি? এটি আমার দৃশ্যে আসলে একটি অসুবিধা।

Comments

সম্ভবত না, যদি না আপনি Dateঅবজেক্টের সাথে একসাথে হ্যাক না করেন তা দেখতে সত্যিই কোন সময় কেটে গেছে।

— অ্যালেক্স

আপনি আপনার পরিস্থিতি সম্পর্কে আরও ব্যাখ্যা করতে পারেন? সম্ভবত এটি কোনও অসুবিধা নয়।

— জেমস

আপনি এই কোড পরিবর্তনটি বোঝাতে চেয়েছেন , এবং আপনি যা চান তা এখানেও আলোচনা করা হয়েছে - অলিভার ম্যাটোস চারপাশে কিছু কাজ পোস্ট করেছেন, সম্ভবত এটি আপনার ক্ষেত্রেও বৈধ?

— শেডো উইজার্ড আপনার পক্ষে ইয়ার

এটা প্রায় সবসময় ভাল, অ্যানিমেশন শুরু থেকে পঠিত হিসাবে থেকে অতিবাহিত বাস্তব সময় পরিমাণ কী অ্যানিমেশন এর Date। যাতে অন্তরগুলি যখন দ্রুত জ্বলে না যায় (এই বা অন্যান্য কারণে) অ্যানিমেশনটি কেবল ধীর হয়ে যায়, ধীর হয় না।

— ববিনস

প্রশ্নের শিরোনাম আমাকে এখানে নিয়েছিল তবে আমার ব্যবহারের ক্ষেত্রে কিছুটা আলাদা ছিল - আমার কোনও ট্যাবটির নিষ্ক্রিয়তা নির্বিশেষে রিফ্রেশ হওয়া একটি প্রমাণীকরণ টোকেন দরকার। যদি এটি আপনার জন্য প্রাসঙ্গিক হয় তবে আমার উত্তরটি এখানে দেখুন

— এরেজ কোহেন

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>

---

পটভূমি টাস্কের জন্য (নন-ইউআই সম্পর্কিত)

@ ইউপি দ্য ক্রিক মন্তব্য:

উপস্থাপনা ইস্যুগুলির জন্য দুর্দান্ত, তবে এখনও কিছু জিনিস রয়েছে যা আপনার চালিয়ে যাওয়া দরকার।

আপনি পটভূমির কর্ম আছে তাহলে চাহিদা অবিকল দেওয়া সময় অন্তর মৃত্যুদন্ড কার্যকর করা হবে, আপনি ব্যবহার করতে পারেন HTML5 ওয়েব ওয়ার্কার্স । কটাক্ষপাত Möhre এর নিচে উত্তর আরো বিস্তারিত জানার জন্য ...

সিএসএস বনাম জেএস "অ্যানিমেশন"

এই সমস্যাটি এবং আরও অনেকে জাভাস্ক্রিপ্ট ভিত্তিক অ্যানিমেশনগুলির পরিবর্তে সিএসএস রূপান্তর / অ্যানিমেশন ব্যবহার করে এড়ানো যেতে পারে যা যথেষ্ট ওভারহেড যুক্ত করে। আমি এই jQuery প্লাগইনটি সুপারিশ করব যা আসুন আপনি যেমন animate()পদ্ধতিগুলির মতো সিএসএস রূপান্তরগুলি থেকে সুবিধা নিতে পারেন ।

Comments

আমি এটি ফায়ারফক্স 5 এ চেষ্টা করেছি এবং ট্যাবটির ফোকাস না থাকলেও 'setInterva'l এখনও চলছে। 'সেটইন্টারভাল'-এ আমার কোড' অ্যানিমেট () 'ব্যবহার করে একটি স্লাইডশো স্লাইড করে। দেখে মনে হচ্ছে অ্যানিমেশনটি ফায়ারফক্স দ্বারা সারিবদ্ধ। আমি যখন ট্যাবটিতে ফিরে যাই, ফায়ারফক্স একের পর এক সাথে সারিটি পপ করে দেয় ফলে সারিটি খালি না হওয়া অবধি দ্রুত চলমান স্লাইডশো তৈরি হয়।

— নবম পিক্সেল

@ আন্থপিক্সেল। স্টপ যুক্ত করবে (www এর উত্তর অনুসারে) টাট পরিস্থিতিতে সহায়তা করবে (প্রতিবারের মতো এটি পূর্ববর্তী অ্যানিমেশনগুলি সাফ করবে)

@gordatron - .stop আমার পরিস্থিতি সাহায্য করে না। একই আচরণ। এবং আমি এখন ফায়ারফক্স 6.0.2 এ আছি। আমি ভাবছি যে এটি যদি jQuery প্রয়োগ করে ani

— নবমপিক্সেল

@ cvsguimaraes - হ্যাঁ ভাল পয়েন্ট। কোনও পশ্চাদপট ট্যাবে থাকা অবস্থায়ও ওয়েব কর্মীরা চালানোর গ্যারান্টি দেয় এমন কোনও অনুমানের কি আপনি জানেন? আমি একজন চিন্তিত

— ছেলে

আমি কোডের পরবর্তী শেষ লাইনটি পরিবর্তন 'পড়ে যেতেন before = now;যেহেতু ব্যায়িত সময় পেতে শুরু পরিবর্তে শেষ পূর্ববর্তী কলের। জিনিসগুলি অ্যানিমেট করার সময় এটি সাধারণত আপনি চান। যেমনটি বর্তমানে, যদি বিরতি ফাংশনটির একটি সম্পাদন elapsedTime15 মিমি নেয়, পরের বার যখন এটি বলা হবে (যখন ট্যাবটি সক্রিয় থাকবে) তখন 35 মিমি (অন্তর্বর্তী 50ms এর পরিবর্তে) দেবে।

— জোনাস বার্লিন

Answer 2

অডিও ফেইডিং এবং এইচটিএমএল 5 প্লেয়ারের সাথে আমি একই সমস্যায় পড়েছি। ট্যাব নিষ্ক্রিয় হয়ে উঠলে এটি আটকে যায়। সুতরাং আমি খুঁজে পেয়েছি যে কোনও ওয়েব ওয়ার্কারকে সীমাবদ্ধতা ছাড়াই অন্তর / সময়সীমা ব্যবহারের অনুমতি দেওয়া হচ্ছে। আমি এটি প্রধান জাভাস্ক্রিপ্টটিতে "টিক্স" পোস্ট করতে ব্যবহার করি।

ওয়েব ওয়ার্কার্স কোড:

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

ঝরঝরে! এখন আসুন আশা করি তারা এটিকে "ঠিক" করবে না।

— pimvdb

গ্রেট! এই অ্যাসোসিয়েশনটি ব্যবহার করা উচিত যখন আপনার ঠিক কাজ করার জন্য টাইমার প্রয়োজন তবে কেবলমাত্র কিছু অ্যানিমেশন সমস্যা সমাধানের জন্য নয়!

— কনস্ট্যান্টিন স্মোলিয়ানিন

আমি এটি দিয়ে দুর্দান্ত একটি মেট্রোণোম তৈরি করেছি। আকর্ষণীয় বিষয় যে সর্বাধিক জনপ্রিয় এইচটিএমএল 5 ড্রাম মেশিনগুলি এই পদ্ধতিটি ব্যবহার করে না এবং পরিবর্তে নিকৃষ্ট নিয়মিত সেটটাইমআউট ব্যবহার করে। skyl.github.io/grimoire/fretboard-prototype.html - ক্রোম বা সাফারি এখনই এটি সেরা অভিনয় করে।

— Skylar Saveland

ডেভেলপাররা এটি আপত্তিজনক ব্যবহার শুরু করলে তারা এটিকে "ঠিক" করবে। বিরল ব্যতিক্রম সহ, আপনার অ্যাপ্লিকেশনটি এত গুরুত্বপূর্ণ নয় যে ব্যবহারকারীর অভিজ্ঞতায় কিছুটা ন্যূনতম উন্নতি প্রদানের জন্য এটি পটভূমিতে সংস্থান গ্রহণ করা উচিত।

— গানচার্স

Answer 3

ওয়েব ওয়ার্কার্স ব্যবহার করার একটি সমাধান রয়েছে (যেমন আগে বলা হয়েছে), কারণ তারা পৃথক প্রক্রিয়াতে চলে এবং ধীর হয়ে যায় না

আমি একটি ছোট স্ক্রিপ্ট লিখেছি যা আপনার কোড পরিবর্তন না করে ব্যবহার করা যেতে পারে - এটি কেবল ফাংশন সেটটাইমআউট, ক্লিয়ারটাইমআউট, সেটইন্টারভাল, ক্লিয়ার ইনটারওয়ালকে ওভাররাইড করে।

আপনার সমস্ত কোডের আগে এটি অন্তর্ভুক্ত করুন।

আরও তথ্য এখানে

Comments

আমি লাইব্রেরিগুলি সহ টাইমার ব্যবহার করে এমন একটি প্রকল্পে এটি পরীক্ষা করেছি (যাতে আমি নিজে শ্রমিক প্রয়োগ করতে পারি না)। এটি একটি মোহন মত কাজ করে। এই গ্রন্থাগারের জন্য ধন্যবাদ

— ArnaudR

@ রুসলান-তুষভ ক্রোম 60০ তে এটি চেষ্টা করেছিলেন তবে মনে হচ্ছে এটি কার্যকর হয়নি ... আমি সিএসএস অ্যানিমেশন দ্বারা অ্যানিমেটেড ডিওমে যোগ করতে / সরানোর জন্য বেশ কয়েকটি সেটটাইমআউট থেকে কয়েকটি ফাংশন কল করছি, এবং আমি সেগুলি হিমশীতল দেখছি ট্যাব স্যুইচ করার পরে কিছুটা বিলম্বের সাথে (প্লাগিনগুলি ছাড়াই যথারীতি)

— নব্যদেব

@ নিউড্যাভ আপনি কি অন্য কোনও জাভাস্ক্রিপ্টের আগে হ্যাকটাইমআর.জে (বা হ্যাকটাইমআর.মিন.জে) লোড করেছেন?

— ডেভিড পট্টি

@ নিওদেব এটি সত্যিই অদ্ভুত বলে মনে হচ্ছে, কারণ আমি সম্প্রতি চেষ্টা করেছি এবং এটি কাজ করে

— ডেভিড পট্টি

@ ডুরডেনপি হ্যাঁ আমি এটি অন্য কোনও জাভাস্ক্রিপ্টের আগে রাখার চেষ্টা করেছি। আমি সিএসএস অ্যানিমেশন ব্যবহার করছিলাম কারণ? আমার মনে আছে আমি ওয়েবকর্মীদের চেষ্টা করেছি কিন্তু ভাগ্য ছাড়াই

— 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

এটি জেনে রাখা ভাল - উদাহরণস্বরূপ, এজাক্স আপডেটের জন্য যেখানে সর্বশেষতম ডেটা সর্বদা সঠিক - তবে পোস্ট করা প্রশ্নের অর্থ এই নয় যে অ্যানিমেশনটি "এ" হিসাবে উল্লেখযোগ্যভাবে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে বেড়েছে was ?

Answer 5

আমি মনে করি যে এই সমস্যা সম্পর্কে সর্বোত্তম বোঝাপড়া এই উদাহরণে: http://jsfiddle.net/TAHDb/

আমি এখানে একটি সাধারণ জিনিস করছি:

1 সেকেন্ডের বিরতি দিন এবং প্রতিবার প্রথম স্প্যানটি লুকান এবং এটিকে শেষের দিকে সরান, এবং দ্বিতীয় স্প্যানটি দেখান।

আপনি যদি পৃষ্ঠায় থাকেন তবে এটি যেমন অনুমিত হয় তেমন কাজ করে। তবে আপনি যদি কিছু সেকেন্ডের জন্য ট্যাবটি আড়াল করে রাখেন, ফিরে এসে আপনি একটি ক্লান্ত জিনিস দেখতে পাবেন।

এটি এখন এমন সমস্ত ইভেন্টের মতো যা আপনি নিষ্ক্রিয় থাকাকালীন সময়ে যে সময়টি কাটিয়ে ওঠেননি এটি 1 বারের মধ্যে সমস্ত কিছু হয়ে যাবে। তাই কয়েক সেকেন্ডের জন্য আপনি এক্স ইভেন্টগুলির মতো পাবেন। তারা এত দ্রুত যে সমস্ত 6 টি স্প্যান একবারে দেখতে পাওয়া সম্ভব see

সুতরাং এটি ক্রোমগুলি কেবল ইভেন্টগুলিতে বিলম্ব করে, তাই যখন আপনি ফিরে পাবেন সমস্ত ইভেন্টগুলি ঘটবে তবে সমস্ত একবারে ...

একটি সাধারণ অ্যাপ্লিকেশন হ'ল একটি সাধারণ স্লাইডশোর জন্য এই ocur ইস্যু। নম্বরগুলি চিত্র হিসাবে রয়েছে তা কল্পনা করুন এবং ব্যবহারকারী ফিরে আসার সময় যদি ট্যাবটি লুকিয়ে থাকে তবে তিনি দেখতে পাবেন যে সমস্ত চিত্র ভাসমান, সম্পূর্ণরূপে মেশানো।

এটি ঠিক করার জন্য স্টিমটি (সত্য, সত্য) এর মতো পিমভডিবি বলেছেন। এটি ইভেন্টের সারিটি সাফ করবে।

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০ এ চেষ্টা করা হয়েছে তবে এটির কোনও প্রভাব পড়েছে বলে মনে হচ্ছে না ... আমি সিএসএস অ্যানিমেশন দ্বারা অ্যানিমেটেড ডিওমে উপাদান যুক্ত / সরানোর জন্য কয়েকটি সেটটাইমআউট থেকে কয়েকটি ফাংশন কল করছি, এবং আমি এগুলি পরে কিছুটা বিলম্বের সাথে হিমশীতল দেখতে পাচ্ছি ট্যাব স্যুইচ (প্লাগিনগুলি ব্যতীত যথারীতি)

— নিওদেব

আমি এটি ক্রোম 60 দিয়ে ব্যবহার করি you আপনি কি একটি ডেমো তৈরি করতে এবং গিথুব ইস্যুতে পোস্ট করতে পারেন?

— মেরি

Answer 9

একটি অডিও ফাইল বাজানো আপাতত পুরো পটভূমি জাভাস্ক্রিপ্টের কর্মক্ষমতা নিশ্চিত করে

আমার জন্য, এটি ছিল সহজতম এবং অন্তত অন্তর্নিহিত সমাধান - একটি অজ্ঞান / প্রায়-খালি শব্দ বাজানো বাদে, অন্য কোনও সম্ভাব্য পার্শ্ব প্রতিক্রিয়া নেই

আপনি এখানে বিশদটি পেতে পারেন: https://stackoverflow.com/a/51191818/914546

(অন্যান্য উত্তরগুলি থেকে, আমি দেখতে পাচ্ছি যে কিছু লোক অডিও ট্যাগের বিভিন্ন বৈশিষ্ট্য ব্যবহার করে, আমি আশ্চর্য হয়েছি যে আসলে কিছু না খেলেই পুরো পারফরম্যান্সের জন্য অডিও ট্যাগটি ব্যবহার করা সম্ভব কিনা)

Answer 10

এখানে আমার রুক্ষ সমাধান

(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নিজস্ব ঘটনা এটা হ্যান্ডলিং করা হয়, যার ফলে একটি অসীম লুপ যে UI 'তে অবরুদ্ধ করছে না তা হচ্ছে এমন কিছুকে ডাকে,। এবং এটি যখন অসীমভাবে লুপিংয়ের সময় চালিয়ে যাওয়ার সময়সীমা বা বিরতি ফাংশন আছে তা প্রতিটি ইভেন্ট-হ্যান্ডলিংয়ের সাথে পরীক্ষা করছে।

— 3

Answer 11

দ্রষ্টব্য: আপনি যদি পছন্দ করেন যে আপনার অন্তরটি ব্যাকগ্রাউন্ডে কাজ করে, উদাহরণস্বরূপ, অডিও বাজানো বা ... তবে আপনি যদি বিভ্রান্ত হন তবে উদাহরণস্বরূপ আপনার অ্যানিমেশনটি আপনার পৃষ্ঠাতে ফিরে আসার সময় সঠিকভাবে কাজ করছে না (ট্যাব) এটি হ'ল একটি ভাল সমাধান।

এই লক্ষ্য অর্জনের জন্য অনেকগুলি উপায় রয়েছে, সম্ভবত "ওয়েব ওয়ার্কার্স" সর্বাধিক মানসম্পন্ন তবে অবশ্যই এটি সবচেয়ে সহজ এবং সহজ কাজ নয়, বিশেষত আপনার যদি পর্যাপ্ত সময় না থাকে, তাই আপনি এইভাবে চেষ্টা করতে পারেন:

বেসিক কনসপট:

1- আপনার অন্তর (বা অ্যানিমেশন) এর জন্য একটি নাম তৈরি করুন এবং আপনার অন্তর সেট করুন (অ্যানিমেশন), যাতে ব্যবহারকারীর প্রথমবার আপনার পৃষ্ঠাটি খুললে এটি চলবে: var interval_id = setInterval(your_func, 3000);

2- $(window).focus(function() {});এবং $(window).blur(function() {});আপনি clearInterval(interval_id)প্রতিটি সময় ব্রাউজার (ট্যাব) নিষ্ক্রিয় করতে পারেন এবং আপনার বিরতি পুনরায় চালু করতে পারেন (অ্যানিমেশন) প্রতিটি সময় ব্রাউজার (ট্যাব) দ্বারা আবার অ্যাকসেস হবেinterval_id = setInterval();

AM নমুনা কোড:

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 12

আমি মনে করি যে এটি সঙ্গে এখনই পেতে সবচেয়ে সহজ উপায় jQuery 3.3.xএই ফাংশনটি ব্যবহার করা হয়:

intervalFunction();

$([window, document]).on('focusin', function(){
    if (!intervalId){
        intervalFunction();
    }
}).on('focusout', function(){
    if (intervalId) {
        clearInterval(intervalId);
        intervalId = undefined;
    }
});

function intervalFunction() {
    // Your function hire
}

intervalFunction() পৃষ্ঠা লোডে তাত্ক্ষণিকভাবে আরম্ভ করা হয় এবং তারপরে যদি আপনার ফোকাস ফিরে আসে আপনি বিরতি পুনরায় সক্রিয় করার চেষ্টা করেন তবে আপনার পৃষ্ঠাটি যদি ফোকাস হারিয়ে ফেলে তবে আপনি সর্বদা এটিতে ফিরে আসতে পারেন।

এটা পরিষ্কার এবং স্বাচ্ছন্দ্য। অতিরিক্তভাবে এই সমাধানগুলি হ'ল .focus(), .focusin()এবং এর মতো অবহেলা ফাংশন ব্যবহার করে না.focusout()

Answer 13

এটি বেশ পুরানো প্রশ্ন তবে আমি একই সমস্যার মুখোমুখি হয়েছি।
আপনি যদি ক্রোমে আপনার ওয়েবটি চালনা করেন তবে আপনি এই পোস্টটি পটভূমির ট্যাবগুলি ক্রোম 57 এ পড়তে পারেন ।

মূলত ব্যবধান টাইমারটি যদি টাইমার বাজেটের বাইরে না চলে যায় তবে চলতে পারে।
বাজেটের ব্যবহার সিপিইউ টাইমার ভিতরে টাস্ক সময় ব্যবহারের উপর ভিত্তি করে।
আমার দৃশ্যের ভিত্তিতে, আমি ক্যানভাসে ভিডিও আঁকছি এবং ওয়েবআরটিটিসিতে পরিবহন করি।
ওয়েবেআরটিসি ভিডিও সংযোগটি আপডেট করা চালিয়ে যাবে এমনকি ট্যাবটি নিষ্ক্রিয়।

তবে আপনি setIntervalপরিবর্তে ব্যবহার করতে হবে requestAnimationFrame।
যদিও এটি ইউআই রেন্ডারিংয়ের জন্য প্রস্তাবিত নয়।

visibilityChangeইভেন্ট শোনানো এবং সেই অনুসারে মেকানিজম রেন্ডার করা ভাল ।

এছাড়াও, আপনি @ কান-সোরাল চেষ্টা করতে পারেন এবং এটি ডকুমেন্টের ভিত্তিতে কাজ করা উচিত।

Answer 14

আমি আমার কলব্যাক ফাংশনটিতে অডিও ট্যাগ ব্যবহার করে এবং এর অনটাইমআপডেট ইভেন্টটি পরিচালনা করতে সর্বনিম্ন 250 মিমি কল করতে সক্ষম হয়েছি। এটি এক সেকেন্ডে 3-4 বার বলা হয়। এটি এক সেকেন্ড পিছনে সেটটাইমআউটের চেয়ে ভাল