How can I properly reset a timeout duration?

Question

How can I properly reset a timeout duration?

I'm currently working with a function that looks like this:

function blabla(){
    ...

    setTimeout(() => {
        //do some stuff
    }, 10000) 
}

My question is, how can I reset the time of the timeout (10000) if the function was called and the timeout was not finished yet?
I attempted to cancel the timeout if it exists, like so:

function blabla(){
    ...

    if(to){
       clearTimeout(to)
    } 

    let to = setTimeout(() => {
        //do some stuff
    }, 10000) 
}

However, I encountered an error indicating that to is undefined. What is the correct way to determine if a timeout exists or not? Is there a more efficient approach to achieve this task?

javascript timeout

Answer 1

Answer №1

Make sure to declare to before the if statement, ensuring that it is defined when the condition is checked. You can leave its value undefined initially and assign a value later on.

It's advisable to declare to outside the function to maintain its state between function calls.

Take a look at this demo to see how the clearTimeout function works in action. Even after calling the blablah() function twice, you'll only see "hello" once because the second call cancels the original timeout.

var to;

function blabla() {
  //...

  if (to) {
    clearTimeout(to)
  }

  to = setTimeout(() => {
    //do some stuff
    console.log("hello");
  }, 10000)
}

blabla();
blabla();

Answer 2

Make sure to declare to before the if statement, ensuring that it is defined when the condition is checked. You can leave its value undefined initially and assign a value later on.

It's advisable to declare to outside the function to maintain its state between function calls.

Take a look at this demo to see how the clearTimeout function works in action. Even after calling the blablah() function twice, you'll only see "hello" once because the second call cancels the original timeout.

var to;

function blabla() {
  //...

  if (to) {
    clearTimeout(to)
  }

  to = setTimeout(() => {
    //do some stuff
    console.log("hello");
  }, 10000)
}

blabla();
blabla();

Answer 3

Answer №2

Avoid using let since its scope is limited to the function block. Instead, use var so that the variable is accessible across multiple function calls.

Answer 4

Avoid using let since its scope is limited to the function block. Instead, use var so that the variable is accessible across multiple function calls.

Answer 5

Answer №3

Avoid using global variables for this purpose as they are not reusable. It's best to create a wrapper function instead, as this is a common programming pattern. You can either implement this natively or use an npm package.

Many JavaScript libraries come with built-in debounce functions. The main goal of these functions is to minimize unnecessary calls by preventing a function from being executed multiple times in quick succession. Regardless of the library used, all debounce functions rely on JavaScript's native setTimeout function.

Check out https://www.npmjs.com/package/debounce for more information:

function debounce(func, wait, immediate) {
    let timeout;
    return function() {
        let context = this,
            args = arguments;
        let later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        let callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

var example = debounce(function(){
     console.log(5)
}, 5000);
example()
example()

Answer 6

Avoid using global variables for this purpose as they are not reusable. It's best to create a wrapper function instead, as this is a common programming pattern. You can either implement this natively or use an npm package.

Many JavaScript libraries come with built-in debounce functions. The main goal of these functions is to minimize unnecessary calls by preventing a function from being executed multiple times in quick succession. Regardless of the library used, all debounce functions rely on JavaScript's native setTimeout function.

Check out https://www.npmjs.com/package/debounce for more information:

function debounce(func, wait, immediate) {
    let timeout;
    return function() {
        let context = this,
            args = arguments;
        let later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        let callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

var example = debounce(function(){
     console.log(5)
}, 5000);
example()
example()

How can I properly reset a timeout duration?

Answer №1

Answer №2

Answer №3

Similar questions

Methods for Addressing Absent SocketIO Session Data Within an Express Route Handler

Extracting the id of an element using jQuery

In the Firebug console, Ajax posts are highlighted in a vibrant red color

Using Three.js to create a blurred SVG texture from a canvas

Incorporating an HTML/Javascript game into a reactJS website: A step-by-step

Use ag-Grid to customize your column headers with checkboxes, allowing you to easily select or deselect all items in that column. This feature is not limited to

Obtain the specific key's value from a new Map state

When the "errors" property is not utilized, the error "Cannot read property '_transitionClasses' of undefined" is encountered in vue.runtime.common.js

The side menu in Bootstrap dropdown experiences a one-time functionality

Refine objects based on their properties without removing them from the dataset

What is the best way to route a localpath to a different page including parameters in Nuxt Js?

Executing a function to erase the stored value in local storage during an Angular unit test

Utilizing Regular Expressions to Substitute 'null' in API Data with a Custom String in JavaScript

Is my approach to CSV parsing correct if I am receiving the error "Unable to assign property 'processing' to undefined"?

Is it possible to fulfill a promise within an if statement?

I am looking for a way to generate unique dynamic IDs for each input textbox created within a PHP while loop. Can

Constructing a JSON schema for a dynamic aggregate query

Tips for defining header and parameters when using route.get in Node.js

implementing ajax form submission in codeigniter

What is the best way to remove all attributes from one interface when comparing to another?