需要重构一个node.js应用程序以在浏览器上使用

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上运行时，控制台日志一次显示一个剧集，然后被删除以显示下一集，每次迭代延迟一秒并连接字符串“您正在观看”

我想重新格式化代码，首先在浏览器上显示整个对象，然后一旦显示我需要它从浏览器按时间顺序删除剧集，直到浏览器没有显示任何内容，并且还要使用.filter（）和Object.assign（）到重新格式化的代码。

我想这可能会做你想要的。您可能需要调整间隔时间（不是我下面的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>

需要重构一个node.js应用程序以在浏览器上使用

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上运行时，控制台日志一次显示一个剧集，然后被删除以显示下一集，每次迭代延迟一秒并连接字符串“您正在观看”

我想重新格式化代码，首先在浏览器上显示整个对象，然后一旦显示我需要它从浏览器按时间顺序删除剧集，直到浏览器没有显示任何内容，并且还要使用.filter（）和Object.assign（）到重新格式化的代码。

我想这可能会做你想要的。您可能需要调整间隔时间（不是我下面的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>