Search code examples
javascriptjquerypopover

Kill setTimeout on Popover

I have popover which is used for submitting feedback/question. User can submit the feedback/questions through it. I have two states of popover:

  1. Initial state, Shows text-box and submit button
  2. Success State, Shows big fa-check-circle for success.

Success popover should disappear in 5 seconds so i have setTimeout set to 5000 which destroy the success and and re-initialize popover to initial state.

There is a possibility that user can click the triggering control back to hide the success state. If user do so, it should hide/destroy the success state and re-initialize the popover. I handled the click event of triggering control and check if popover is visible using below code.

$('.questionIcon').data('bs.popover').tip().hasClass('in')

If popover visible hide/destroy and re-initialize it to initial state. The problem here is setTimeout might be still on on the Success popover. how can make my popover force to ignore the timeout execute my code ? Came to know that can use clearTimeout but how on popover ?

Solution

  • While the success pops over, you have to set the time out and store the timeout object in a variable as,

    const timerObj = setTimeout(function(){closePopPver()},5000);

    And when the user click the triggering control back to hide the success state,, in that onclick you can write,

    onclick={function(){clearTimeout(timerObj)}}

    Edit: Another method would be to set a flag when the user click say, reintialised = true. Then inside the timeout function, you can check this flag,

    setTimeout(function(){
  if(!reintialised) closePopPver()
},5000);