Using Angular's setTimeout() function with an external lambda that includes a parameter

Question

Using Angular's setTimeout() function with an external lambda that includes a parameter

My goal is to tackle two issues at once: 1) using

setTimeout( #action#, timeMillis)

with #action# as a lambda 2) supplying the lambda with a parameter.

The common method of

setTimeout( ()=>{ #callback# }, timeMillis)

works flawlessly when extracting ()=>{ #callback# } to lambda (in this case, lambda has no parameters). However, if I attempt to pass a lambda with a parameter to setTimeout, the function malfunctions - the callback triggers immediately.

Below is the code snippet:

let lambda = (text: string): TimerHandler => {
    alert(text)
    return ""
}

 .  .  .  .

lambda('text1')                     // value passes to lambda (displays 'text1')         - OK  |  no delay - X
setTimeout(lambda, 3000);           // value does not pass to lambda (shows 'undefined')   - X   |  delay    - OK
setTimeout(lambda('text3'), 3000);  // value passes to lambda (displays 'text1')         - OK  |  no delay - X

Note: Per setTimeout documentation, the first parameter #action# is of type TimerHandler, which extends string. Therefore, I return an "empty_string" inside the lambda body.

Could the unexpected behavior be due to the empty string in the return statement? I am unsure what should be set there.

angular typescript

Answer 1

Answer №1

If you want to properly utilize the setTimeout function, follow this method:

const delayFunction = (message: string): TimerHandler => {
  console.log(message);
  return '';
}

setTimeout(delayFunction, 3000, "hello");

Expected output after waiting for 3 seconds:

"hello"

Remember to provide arguments to setTimeout after the delay parameter.

The correct syntax is as follows:

let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...)

Answer 2

If you want to properly utilize the setTimeout function, follow this method:

const delayFunction = (message: string): TimerHandler => {
  console.log(message);
  return '';
}

setTimeout(delayFunction, 3000, "hello");

Expected output after waiting for 3 seconds:

"hello"

Remember to provide arguments to setTimeout after the delay parameter.

The correct syntax is as follows:

let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...)

Answer 3

Answer №2

When you call

setTimeout(lambda('text3'), 3000);

, the function is executed immediately and its return value is then scheduled with a timeout, causing it to fire right away.

To prevent this immediate execution, you can follow the advice given in @bjdose's answer by passing parameters or using the callback form

setTimeout(() => { this.lambda('text4') }, 3000);

.

For a working example, check out this Stackblitz link.

Answer 4

When you call

setTimeout(lambda('text3'), 3000);

, the function is executed immediately and its return value is then scheduled with a timeout, causing it to fire right away.

To prevent this immediate execution, you can follow the advice given in @bjdose's answer by passing parameters or using the callback form

setTimeout(() => { this.lambda('text4') }, 3000);

.

For a working example, check out this Stackblitz link.

Using Angular's setTimeout() function with an external lambda that includes a parameter

Answer №1

Answer №2

Similar questions

Converting an HTMLElement to a Node in Typescript

A guide on exporting an Excel file with Spring Boot and Angular 2

Tips for retrieving the present value of a piped/converted BehaviorSubject

What is the best way to provide JSON data instead of HTML in Angular?

Encountering a problem with package-lock.json during project deployment

Having trouble managing TypeScript in conjunction with React and Redux

Encountering difficulties in transmitting ngModel across multiple layers

What is the best way to hide the button when a user is viewing their own profile in an Angular application?

Why is my Angular 2 app (TypeScript) not functioning properly?

Managing DOM elements within a Vue 3 template using Typescript

Utilizing Typescript, create a customized dropdown with react-bootstrap for a tailored user

Every time I attempt to use interpolation in Angular 11, the result ends up being displayed as plain text on

Encountering a type error with mongoose's pre-save method while using Express with TypeScript

Angular 5 is rendering a div even if there is no content present

Error message in Angular states that it is not possible to bind to 'formGroup' because it is not recognized as a property of 'form' within Angular

Construct a string by combining the elements of a multi-dimensional array of children, organized into grouped

What is the best way to change a blob into a base64 format using Node.js with TypeScript?

Disabling click events on a span tag in Angular 6: A step-by-step guide

Transmitting an array through a query parameter from Angular 6 to PHP

How can I efficiently iterate through the array of index IDs and then iterate individually through the communes, categories, and locations?