if 和 else 语句同时执行

Question

我已针对示例修改了此代码，因此日期和时间当前不会自行更新。基本解释是：有一个计数器跟踪当前时间并每秒刷新一次，将其推送到DOM 中的一个元素。但是，我想在一天中的两个特定时间之间执行代码。这些时间在setDrwBrks 函数中定义如下：

  mBrkStrt.setHours( 9, 50, 0 ); mBrkEnd.setHours( 10, 3, 0 );

  dBrkStrt.setHours( 12, 17, 0 ); dBrkEnd.setHours( 12, 30, 0 );

  eBrkStrt.setHours( 17, 50, 0 ); eBrkEnd.setHours( 18, 3, 0 );

  nBrkStrt.setHours( 22, 2, 0 ); nBrkEnd.setHours( 22, 15, 0 );

这是我在fndNxtDrwBrk( date )函数中的问题代码：

  for( j = 0; j < 4; j++ ) {
    if( date > strtDrwBrks[ j ] && date < endDrwBrks[ j ] ) {
      dspl.textContent += '... First statement executed';
    }
    else {   
      document.querySelector( 'footer' ).textContent = 'why is this also executed?';
    }
  }

这里的目标是在date时间介于strtDrwBrks[ j ]和endDrwBrks[ j ]时间之间时执行if语句。在我的 sn-p 中执行此操作是因为我在 pushDates() 函数中手动将时间设置为上午 9:51：

  ////Control current time 
  today.setDate( 8 );
  today.setHours( 9 );
  today.setMinutes( 51 );

因此，应该在上午 9:50 到 10:03 之间执行这段代码，它确实如此。但是我的 else 语句也会执行。这就是问题。任何想法为什么会发生这种情况以及如何解决它？我已经为此工作了几个小时无济于事。

'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;
  
  ////Control current time 
  today.setDate( 8 );
  today.setHours( 9 );
  today.setMinutes( 51 );
  
  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;
  
  return today;
}  // \\/ / / / / / / / / / / / / / PUSH DATES / / / / / / / / / / / / / / / //

function nextDate( startDate, dates ) {  // NEXT DATE / / / / / / / / / / / / /
    var startTime = + startDate,
        nearestDate, nearestDiff = Infinity,
        i, n,
        diff;
    for( i = 0, n = dates.length;  i < n; ++i ) {
        diff = + dates[ i ] - startTime;
        if( diff > 0  &&  diff < nearestDiff ) {
            nearestDiff = diff;
            nearestDate = dates[ i ];
        }
    }
  
    return nearestDate;
}  // \\ / / / / / / / / / / / / / / / / / NEXT DATE / / / / / / / / / / / / //

function setDrwBrks() {  // / / / SET DRAW BREAKS / / / / / / / / / / / / / / /
  var today = pushDate(),
      mBrkStrt = pushDate(), mBrkEnd = pushDate(),
      dBrkStrt = pushDate(), dBrkEnd = pushDate(),
      eBrkStrt = pushDate(), eBrkEnd = pushDate(),
      nBrkStrt = pushDate(), nBrkEnd = pushDate(),
      strtDrwBrks = [], endDrwBrks = [], drwBrksColl = [];
  
  mBrkStrt.setHours( 9, 50, 0 ); mBrkEnd.setHours( 10, 3, 0 );
  
  dBrkStrt.setHours( 12, 17, 0 ); dBrkEnd.setHours( 12, 30, 0 );
  
  eBrkStrt.setHours( 17, 50, 0 ); eBrkEnd.setHours( 18, 3, 0 );
  
  nBrkStrt.setHours( 22, 2, 0 ); nBrkEnd.setHours( 22, 15, 0 );
  
  strtDrwBrks.push( mBrkStrt ); endDrwBrks.push( mBrkEnd );
  strtDrwBrks.push( dBrkStrt ); endDrwBrks.push( dBrkEnd );
  strtDrwBrks.push( eBrkStrt ); endDrwBrks.push( eBrkEnd );
  strtDrwBrks.push( nBrkStrt ); endDrwBrks.push( nBrkEnd );
  
  drwBrksColl.push( strtDrwBrks ); drwBrksColl.push( endDrwBrks );
  
  return drwBrksColl;
}  // \\/ / / / / / / / / / / / / SET DRAW BREAKS / / / / / / / / / / / / / ///

function fndNxtDrwBrk( date ) { // FIND NEXT DRAW BREAK / / / / / / / / / / ///
  date = pushDate();
  
  var drwBrks = setDrwBrks(),
      nxtDrwBrk = nextDate( date, drwBrks[ 0 ] ),
      strtDrwBrks = drwBrks[ 0 ],
      endDrwBrks = drwBrks[ 1 ],
      i,
      j,
      day,
      dspl = document.getElementById( 'dspl' ),
      dspl2 = document.getElementById( 'dspl-2' );
  
  if( nxtDrwBrk === undefined ) {
    for( i = 0; i < 4; i++ ){
      drwBrks[ 0 ][ i ].setDate( date.getDate() + 1 );
    }  
    nxtDrwBrk = nextDate( date, drwBrks[ 0 ] );
  }
  
  day = nxtDrwBrk.getDay();
  
  if( day === 0 ) {
    nxtDrwBrk.setDate( nxtDrwBrk.getDate() + 1 );
    nxtDrwBrk.setHours( 9, 50, 0 );
  }
  
  for( j = 0; j < 4; j++ ) {
    if( date > strtDrwBrks[ j ] && date < endDrwBrks[ j ] ) {
      dspl.textContent += '... First statement executed';
    }
    else {   
      document.querySelector( 'footer' ).textContent = 'why is this also executed?';
    }
  }
  
  return nxtDrwBrk;
}  // \\ / / / / / / / / / / / / FIND NEXT DRAW BREAK / / / / / / / / / / / ///

// ////////////////////////////// START //////////////////////////////////// //
function start() {
  var today = pushDate();
  
  pushDate();
  callBySec( pushDate );
  fndNxtDrwBrk( today );
}
start();

.remove {
  display: none;
}

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

<p id="dspl-2" class="remove">
  Secondary Text
</p>

<footer></footer>

PS。 控制台中的错误是因为我使用////Control current time 注释下的代码手动将时间更改为测试时间之间的范围。删除它，控制台将安静。不知道如何为这个 sn-p 设置这样的时间而不遇到该错误，尝试修复，但这是一个单独的问题，实际上不需要修复，因为设置它的代码仅用于此演示。

Answer 1

您正在四个不同的时间间隔之间进行迭代。时间不能同时在您的第一个间隔和第二个间隔以及第三个和第四个间隔之间。

例如： 12.30 介于 10.10 和 13.20 之间，但不在 15.20 和 16.40 之间 因此，当要测试它是否在第二个时间间隔之间时，它会转到 else 语句。 当您测试 4 个间隔（循环 4 次）时，它将转到 else 3 次，因为只有一个间隔包含实际小时。

所以，假设您想知道它是否在您拥有的四个间隔之一之间。

创建了一个布尔值isBetweenOneInterval，默认设置为 false。 然后在你的 interals 之间迭代。

If time is between interval

将isBetweenOneInterval 设置为真

循环结束后，检查isBetweenOneInterval 是否为true。

如果 isBetweenInterval 是 true 在间隔之间做你想做的事。 如果没有，就在它不在一个区间之间时做你想做的事情，例如隐藏包含倒计时的div。

放入代码中的意思是：

var isBetweenOneInterval = false;

 for( j = 0; j < 4; j++ ) {
    if( date > strtDrwBrks[ j ] && date < endDrwBrks[ j ] ) {
     isBetweenOneInterval = true;
    }
  }

if (isBetweenOneInterval == true)
{
 //// DO WHAT YOU WANT IF THE CURRENT TIME IS BETWEEN AN INTERVAL
}
else
{
 ///// DO WHAT YOU WANT IF THE CURRENT TIME ISN'T BETWEEN ANY INTERVAL
}