Adjusting the settimeout delay time during its execution

Question

Adjusting the settimeout delay time during its execution

Is there a way to adjust the setTimeout delay time while it is already running? I tried using debounceTime() as an alternative, but I would like to modify the existing delay time instead of creating a new one.

In the code snippet provided, the delay is set to 10 seconds. However, I am looking for a solution where I can update the delay time dynamically when a mouse event is triggered while the setTimeout function is still running.

Your guidance on this matter would be greatly appreciated. Thank you!

javascript angular typescript rxjs6

Answer 1

Answer №1

To simplify the process, you can utilize a custom Timer class. Check out the following example of its implementation. Use the method Timer.start to initiate the timer. In case you need to modify any data and run it again, employ Timer.interrupt. This function calculates the difference and restarts the process, allowing for logic modifications.

class Timer {
  constructor(cb, ms = 2000) {
    this._ms = ms;
    this.ms = ms;
    this.cb = cb;
    this.timer = null;
    this.startedAt = null;
  }
  start() {
    this.startedAt = new Date().getTime();
    clearTimeout(this.timer);
    console.log("started");
    this.timer = setTimeout(() => {
      this.cb();
    }, this._ms);
  }
  intrupt() {
    const timeSpends = new Date().getTime() - this.startedAt;
    const timeLeft = this.ms - timeSpends;
    if (timeLeft > 0) {
      this._ms = timeLeft;
      this.start();
    }
  }
}
console.time("TIME");
let counter = 0;
const timer = new Timer(() => {
  console.timeEnd("TIME");
  console.log("counter: ", counter);
});

timer.start();
setTimeout(function cancel() {
  counter++;
  timer.intrupt();
}, 1000);

Answer 2

To simplify the process, you can utilize a custom Timer class. Check out the following example of its implementation. Use the method Timer.start to initiate the timer. In case you need to modify any data and run it again, employ Timer.interrupt. This function calculates the difference and restarts the process, allowing for logic modifications.

class Timer {
  constructor(cb, ms = 2000) {
    this._ms = ms;
    this.ms = ms;
    this.cb = cb;
    this.timer = null;
    this.startedAt = null;
  }
  start() {
    this.startedAt = new Date().getTime();
    clearTimeout(this.timer);
    console.log("started");
    this.timer = setTimeout(() => {
      this.cb();
    }, this._ms);
  }
  intrupt() {
    const timeSpends = new Date().getTime() - this.startedAt;
    const timeLeft = this.ms - timeSpends;
    if (timeLeft > 0) {
      this._ms = timeLeft;
      this.start();
    }
  }
}
console.time("TIME");
let counter = 0;
const timer = new Timer(() => {
  console.timeEnd("TIME");
  console.log("counter: ", counter);
});

timer.start();
setTimeout(function cancel() {
  counter++;
  timer.intrupt();
}, 1000);

Adjusting the settimeout delay time during its execution

Answer №1

Similar questions

When saving a canvas as an image, it only results in a blank, transparent image

Ways to retrieve slider value when button is clicked?

attempting to pass a boolean type through props resulting in a type error

Lending a hand in deselecting a rule within the jcf-hidden add-on using Selenium

Pull in class definitions from the index.js file within the node_modules directory

Transitioning from Webpack to Vite: Resolving Path Alias and Ensuring Proper Imports

Dividing an array of characters within an ng-repeat and assigning each character to its individual input tag

Is there a way to grab the inner content of an e-mail link by right-clicking on it?

Issue with Angular.forEach loop malfunctioning

methods for obtaining access in JavaScript when dealing with an ArrayList<Object> that has been converted to a JSONArray

React TypeScript - creating a component with a defined interface and extra properties

Tips for formatting a Date field within an Angular application

Chrome fails to read font family correctly

Tips for retrieving next-auth authOptions from an asynchronous function

Unveil Secret Divs with a Click

Is it possible to design a Typescript type that only contains one property from a defined set and is indexable by that set as well?

Setting up a custom PrimeNG theme to match our unique style is a great way to

Tips for transferring data from a service to a method within a component

I am unable to send back my JSON object

PHP array utilized in a dynamic dropdown menu