JavaScript：if语句判断后setInterval无法清除的问题排查

Hey there! The issue here is super straightforward—you're not storing the unique ID that setInterval() returns, so clearInterval() has no clue which timer to stop. Let me break this down for you:

The Root Problem #

Every time you call setInterval(), the browser gives back a unique numeric ID that identifies that specific timer. When you want to stop it later, you have to pass that exact ID to clearInterval(). Right now, your code calls clearInterval() with no arguments, so it can't target the running timer at all.

Fixed Code Example #

Here's how to adjust your code to track and clear the timer properly:

// Declare a variable outside the event handler to store the timer ID persistently
let liveUpdateInterval;

$('.match-dates').on('afterChange', function () { 
  var currentSelectionDate = $('.match-dates .slick-current > div > div').attr('data-date'); 
  var liveStatus; 

  if(currentSelectionDate == null){ 
    liveStatus = 1; 
    // First, clear any existing timer before starting a new one (prevents duplicates)
    if (liveUpdateInterval) {
      clearInterval(liveUpdateInterval);
    }
    // Store the timer ID when starting the interval
    liveUpdateInterval = setInterval(function () { 
      $.get('/api/index.php?request=GetLiveMatchesSpecial', function ( data ) { 
        $('.lives').html(data); 
      }); 
    }, 5000);
    // Load initial live matches immediately
    $.get('/api/index.php?request=GetLiveMatchesSpecial', function ( data ) { 
      $('.lives').html(data); 
    });
  } else { 
    liveStatus = 0; 
    // Stop the timer using the stored ID
    if (liveUpdateInterval) {
      clearInterval(liveUpdateInterval);
      // Reset the variable to avoid confusion in future events
      liveUpdateInterval = null;
    }
    $.get('/api/index.php?request=GetFixturesSpecial&date=' + currentSelectionDate, function ( data ) { 
      $('.lives').html(data); 
    }); 
  }

  console.log(liveStatus);
});

Key Changes Explained: #

• Added a liveUpdateInterval variable outside the event handler: This keeps the timer ID accessible across multiple afterChange events, so you can reference it later to stop the timer.
• Cleared existing timers before starting new ones: If the user switches back to live mode quickly, this prevents multiple overlapping timers from running at the same time.
• Passed the stored ID to clearInterval(): Now the browser knows exactly which timer to stop when liveStatus becomes 0, and we reset the variable to avoid accidental reuse.

This should fix the issue entirely—your timer will stop as expected when switching away from live matches.

内容的提问来源于stack exchange，提问作者user3446664