javascript - 每秒刷新日期的函数最终导致 Chrome 崩溃

Question

我有一些函数用来获取日期和时间，然后将它们推送到 DOM 中的元素。它似乎工作得很好，直到几分钟后脚本耗尽了 chrome 内存并使页面崩溃。这是我认为影响我的问题的代码:

'use strict';

// ///////////////////////////// INITIAL /////////////////////////////////// //
function leading_0( num ) {
  if( num < 10 ) {
    num = '0' + num;
  }
  
  return num;
}

// ////////////////////////////// DATES //////////////////////////////////// //

function getCurrentTime( date ) {  // TIME / / / / / / / / / / / / / / / / / //
  var hours = date.getHours(),
      minutes = date.getMinutes(),
      seconds = date.getSeconds(),
      suffix = hours >= 12 ? 'PM' : 'AM',
      fullTime;

  hours = hours % 12;

  if( hours === 0 ){
    hours = 12;
  }

  minutes = leading_0( minutes );
  seconds = leading_0( seconds );
  fullTime = hours + ':' + minutes + ':' + seconds + ' ' + suffix;

  return fullTime;
}  // \\/ / / / / / / / / / / / / / / TIME / / / / / / / / / / / / / / / / / //

function getYear( date ) {  /// / / / YEAR / / / / / / / / / / / / / / / / / //
  var year = date.getFullYear();

  return year;
}  // \\/ / / / / / / / / / / / / / / YEAR / / / / / / / / / / / / / / / / / //

function getMonthDay( date ) {  /// MONTH DAY / / / / / / / / / / / / / / / ///
  var day = date.getDate();

  return day;
}  // \\/ / / / / / / / / / / / / / MONTH DAY / / / / / / / / / / / / / / / ///

function getMonth( date ) {  // / / / MONTH / / / / / / / / / / / / / / / / ///
  var months = [
    'January', 'Feburary', 'March',
    'April', 'May', 'June',
    'July', 'August', 'September',
    'October', 'November', 'December'
  ],
  month = months[ date.getMonth() ];

  return month;
}  // \\/ / / / / / / / / / / / / / / MONTH / / / / / / / / / / / / / / / / ///

function getWkDay( date ) {  /// / / WEEK DAY / / / / / / / / / / / / / / / ///
  var weekdays = [ 
    'Sunday', 'Monday', 
    'Tueday', 'Wednesday', 
    'Thursday', 'Friday', 
    'Saturday' 
  ],
  wkDay = weekdays[ date.getDay() ];

  return wkDay;
}  // \\ / / / / / / / / / / / / / / WEEK DAY / / / / / / / / / / / / / / / ///

function callBySec( func ) {
  setInterval( func, 1000 );
}

function pushDate(){  /// / / / / / PUSH DATES / / / / / / / / / / / / / / / //
  var today = new Date(),
      wkDay,
      month,
      day,
      year,
      time,
      d = document;
    
  wkDay = getWkDay( today );
  month = getMonth( today );
  day = getMonthDay( today );
  year = getYear( today );
  time = getCurrentTime( today );
  
  d.getElementById( 'wkDay' ).textContent = wkDay;
  d.getElementById( 'month' ).textContent = month;
  d.getElementById( 'day' ).textContent = day;
  d.getElementById( 'year' ).textContent = year;
  d.getElementById( 'time' ).textContent = time;
  
  callBySec( pushDate );
}  // \\/ / / / / / / / / / / / / / PUSH DATES / / / / / / / / / / / / / / / //

// ////////////////////////////// START //////////////////////////////////// //
function start() {
  pushDate();
}
start();

<p>
  <span id="wkDay"></span>, 
  <span id="month"></span> <span id="day"></span>, 
  <span id="year"></span> <b>|</b> <span id="time"></span>
</p>

上面的代码是否占用了大量内存？即使在这个 SO 页面上，它最终也会使 chrome 崩溃。有没有更好的方法来做到这一点并获得相同的结果？

Answer 1

取出这一行:

callBySec( pushDate );

在pushDate()的末尾。您已经使用 setInterval() 每秒调用该函数，无需再次启动计时器。结果是您每秒都创建另一个计时器。一分钟后，您每秒运行该函数 60 次。

如果 callBySec 使用 setTimeout() 而不是 setInterval()，您的代码将是正确的。

然后 start() 函数应该调用 callBySec:

'use strict';

function leading_0(num) {
  if (num < 10) {
    num = '0' + num;
  }

  return num;
}


function getCurrentTime(date) {
  var hours = date.getHours(),
    minutes = date.getMinutes(),
    seconds = date.getSeconds(),
    suffix = hours >= 12 ? 'PM' : 'AM',
    fullTime;

  hours = hours % 12;

  if (hours === 0) {
    hours = 12;
  }

  minutes = leading_0(minutes);
  seconds = leading_0(seconds);
  fullTime = hours + ':' + minutes + ':' + seconds + ' ' + suffix;

  return fullTime;
} 

function getYear(date) {
  var year = date.getFullYear();

  return year;
} 

function getMonthDay(date) { 
  var day = date.getDate();

  return day;
} 

function getMonth(date) { 
  var months = [
      'January', 'Feburary', 'March',
      'April', 'May', 'June',
      'July', 'August', 'September',
      'October', 'November', 'December'
    ],
    month = months[date.getMonth()];

  return month;
} 
function getWkDay(date) { 
  var weekdays = [
      'Sunday', 'Monday',
      'Tueday', 'Wednesday',
      'Thursday', 'Friday',
      'Saturday'
    ],
    wkDay = weekdays[date.getDay()];

  return wkDay;
}

function callBySec(func) {
  setInterval(func, 1000);
}

function pushDate() { 
  var today = new Date(),
    wkDay,
    month,
    day,
    year,
    time,
    d = document;

  wkDay = getWkDay(today);
  month = getMonth(today);
  day = getMonthDay(today);
  year = getYear(today);
  time = getCurrentTime(today);

  d.getElementById('wkDay').textContent = wkDay;
  d.getElementById('month').textContent = month;
  d.getElementById('day').textContent = day;
  d.getElementById('year').textContent = year;
  d.getElementById('time').textContent = time;
} 

function start() {
  callBySec(pushDate);
}
start();

<p>
  <span id="wkDay"></span>,
  <span id="month"></span> <span id="day"></span>,
  <span id="year"></span> <b>|</b> <span id="time"></span>
</p>