Custom pop up timer not working correctly

Question

When socket messages come, I pop up divs in my page which disposes after 3 seconds themselves

<!-- I'm using vuejs -->

<div v-for='item in messageList'>
  <!-- message body ,  -->
</div>

// used to pause timer when mouseEnter and resume when mouseLeave
const mesTimerMap = new Map()

const messageList = ref([])
socket.on('message',function(mesBody){
  messageList.value.push(mesBody)
  let timer = setTimeout(()=>{
    handleRemove(mesBody) // in which I splice messageList
  },3000)
  mesTimerMap.set(mesBody.id,timer)
})

But I found that if I switch to other tabs and here comes a message, when I change back to my page, the pop up is still there even 3 seconds already passed. And I can not replicate this every time. Why is that?

Hao Wu · Accepted Answer · 2025-10-14 03:22:25Z

1

Many browsers tend to limit background activities (timers, events etc.) when the tab is minimized for memory optimization, which all the scheduled events will trigger at once when user re-activates the tab. Consider using a service worker to handle the socket communication and message queue so it won't be throttled. Refer to this post and Service Worker API.

If that would be an overhaul, you may also try adding a timestamp in the mesBody from your server side. Then if the message is expired when message event triggers, skip the popup logic.

socket.on('message',function(mesBody){
  // if the message is already expired (10s buffer) when the event triggers, skip the process
  if (mesBody.timestamp < Date.now() - 10_000) return;

  messageList.value.push(mesBody)
  let timer = setTimeout(()=>{
    handleRemove(mesBody) // in which I splice messageList
  },3000)
  mesTimerMap.set(mesBody.id,timer)
})

answered Oct 14 at 3:22

Hao Wu

21.6k7 gold badges37 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zhiqiang Guo Oct 15 at 0:44

Good to know that's something browser-side. Codes above are just some pseudo ones, quite a big work if migrating to service worker, I think I'll do that by listening visibilityChange and compare diffs of timestamps.

Collectives™ on Stack Overflow

Custom pop up timer not working correctly

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related