このコードは、コンソールログが遅れで表示し、次のエピソードを表示するには、削除される時に各エピソード1を表示Node.jsの上で実行されたときに、ブラウザ

Question

const episodes = [ 
    { id: 's06e01', title: 'Pilot' }, 
    { id: 's06e02', title: 'Top Banana' }, 
    { id: 's06e03', title: 'Charity Drive' }, 
    { id: 's06e04', title: 'Visiting Ours' }, 
    { id: 's06e05', title: 'My Mother, the Car' }, 
    { id: 's06e06', title: 'In God We Trust' }, 
    { id: 's06e07', title: 'Storming the castle' }, 
    { id: 's06e08', title: 'Pier Pressure' }, 
    { id: 's06e09', title: 'Public Relations' }, 
]; 

const finaleEpisode = { id: 's06e10', title: 'Bringing Up Buster' }; 

const addToPlaylist = episodes.concat(finaleEpisode) 

for (let i = 0; i < addToPlaylist.length; i++) { 



    setTimeout(() => { 
     // clears all characters printer on previous loop 
     process.stdout.clearLine(); 

     // use \r at the end to return the cursor to the begining 
     process.stdout.write("You are Now Watching " + addToPlaylist[i].id + ' ' + addToPlaylist[i].title + "\r"); 
    }, i * 2000); 
} 

setTimeout(function(){console.log('\x1Bc'); }, 21000); 

で使用するのNode.jsアプリケーションをリファクタリングする必要がありますそれぞれの繰り返しで1秒間、「あなたは今見ている」という文字列で連結されています

ブラウザでオブジェクト全体を最初に表示するようにコードを再フォーマットしたいのですが、一度表示されると、ブラウザーから何も表示されなくなるまで、また、.filter（）とObject.assign（）を再フォーマットされたコードに使用するまで、ブラウザーからの注文を受け取ります。

Answer 1

これはあなたが欲しいと思うかもしれないと思います。インターバル時間を調整する必要があるかもしれません（200以下ではありません）。

const episodes = [ 
 
    { id: 's06e01', title: 'Pilot' }, 
 
    { id: 's06e02', title: 'Top Banana' }, 
 
    { id: 's06e03', title: 'Charity Drive' }, 
 
    { id: 's06e04', title: 'Visiting Ours' }, 
 
    { id: 's06e05', title: 'My Mother, the Car' }, 
 
    { id: 's06e06', title: 'In God We Trust' }, 
 
    { id: 's06e07', title: 'Storming the castle' }, 
 
    { id: 's06e08', title: 'Pier Pressure' }, 
 
    { id: 's06e09', title: 'Public Relations' }, 
 
    { id: 's06e10', title: 'Bringing Up Buster' } 
 
]; 
 

 
var i = 0; 
 
var el = document.getElementById('output'); 
 

 
var interval = setInterval(
 
() => { 
 
    if (i >= episodes.length) { 
 
     clearInterval(interval); 
 
     el.textContent = 'You are finished watching everything'; 
 
     return; 
 
    } 
 

 
    el.textContent = `You are Now Watching ${episodes[i].id} ${episodes[i].title}`; 
 
    i++; 
 
    }, 200);

<div id="output"></div>