This is the sixth day of my participation in the August Text Challenge.More challenges in August

The phenomenon of

Recently, I have been developing an activity involving countdown. The main logic is as follows:

As soon as you enter the page, you will get the information of the activity. There is the start time of the activity in the activity information. If the start time of the activity has not arrived, you will display the countdown. Then there are other tasks that can be completed on the page, and when you complete the task, the activity information will be refreshed.

Let me briefly simulate this with code:

function fn(date) {
  let now = date
  setInterval(() = > {
    let date = formatTime(now)
    now = now + 1000
    document.querySelector('div').innerText = date

  }, 1000)}// Enter the page to obtain the activity information
fn(+new Date())

// Simulate the completion of the task to retrieve the active data
document.querySelector('button').onclick = () = > {
  fn(+new Date()}Copy the code

The effect is as follows (I recorded this with QQ screen recording function, if you have a better screen recording tool used on MAC, welcome to recommend)

You can clearly see that the numbers are bouncing around, getting smaller and getting bigger, and that’s definitely not an experience that the testers can pass,

So I mentioned the bug and asked me to change it.

To solve

So I thought, why do numbers jump? What was the effect?

Finally, I found that every time I called fn function, there would be a setInterval to refresh the time, but I did not clear the last setInterval when I called, so there would be two setIntervals on the page. Then, due to the single js thread, there might be a delay. The countdown execution within the two setintervals is not synchronized, causing the number to jump.

So I’m in the fn function, and every time I set the setInterval, I would first clear the previous setInterval, and then setInterval.

The simulation code is as follows:

let timer = null
function fn(date) {
  let now = date
  // This is important, each time clear
  clearInterval(timer)
  timer = setInterval(() = > {
    let date = formatTime(now)
    now = now + 1000
    document.querySelector('div').innerText = date

  }, 1000)}// Enter the page to obtain the activity information
fn(+new Date())

// Simulate the completion of the task to retrieve the active data
document.querySelector('button').onclick = () = > {
  fn(+new Date()}Copy the code

Resolution:

SetInterval returns a value every time, and we can call clearInterval with that value and we can cancel setInterval, so I’m just setting a timer variable to store that value, ClearInterval should be set before each call to setInterval so that it doesn’t affect you.

The running effect is as follows:

This may be due to the recording of the screen causes the number to jump a little faster, actually see the number is normal every second.

conclusion

Therefore, if you need to call setInterval or setTimeout functions repeatedly, please call the corresponding clear method, clearInterval or clearTimeout, before canceling the last function call.

Thank you for reading.