Limit the frequency of function calls in Typescript

Update: After some research, I've learned that throttle has the capability to drop excess function invocations, making it unsuitable for my needs. I am still seeking an idiomatic solution to process every item in a queue at an appropriate pace without losing any items.


I'm currently developing a node application that interacts with an API having rate limits. The rate at which I can create calls surpasses the rate at which I can send them. I aim to consume a queue of calls while ensuring they are processed at the right speed and none are overlooked. To illustrate my issue, here is a small TypeScript test I have created:

import * as _ from "lodash";

let start = new Date().getTime();

function doLog(s: string) {
  let elapsed = new Date().getTime() - start;
  console.log(`${s} ${elapsed}`);
}

let array = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];
let throttled = _.throttle(doLog, 100);
array.forEach(s => throttled(s));

My expectation was to see output similar to:

a 2
b 101
c 203
d 302
e 405
f 502
g 603
h 706
i 804
j 902

However, what I actually observe is:

a 2
j 101

Here are some peculiar observations I've made:

  • With a throttle of 100ms, the size of the array doesn't seem to matter: only the first and last elements are printed, regardless of having 2 elements or 20.
  • Using a throttle of 1ms, I see the printing of 3-6 front elements from the array and the last element.

Answer №1

If you're not concerned about ensuring that doLog() is completed before calling the next one, simply utilize setTimeout

let items = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];
items.forEach((item, index) => setTimeout(doLog, index*100, item));

Adam provides a solid explanation for why using throttle may not be suitable in this scenario.

Answer №2

When a throttled function is invoked multiple times within its waiting period, the subsequent calls are simply disregarded. If your goal is to iterate through every element in an array, the throttle() method may not be the most suitable option. It is more effective for restricting excessive updates in the user interface, for instance.

The reason why you're consistently observing a and j in your output is due to the presence of both leading and trailing edges. Although the entire array was processed in under 100ms, with the defaults set to true for both leading and trailing, you witness both the initial and final invocations of the throttled function.

Answer №3

By incorporating RxJS, you can accomplish this task in a more idiomatic way with the help of the following solution:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to Reload the Active Tab in Angular 5?

In my project, I have noticed that a listener in one of the tabs causes the entire tab to refresh, resulting in it displaying information from the first tab until I switch to another tab and then go back. 1) Is there a way to refresh only the current tab? ...

Ways to implement distinct values for model and input field in Angular 5

I'm currently working on an Angular 5 application and I have a requirement to format an input field with thousand separators (spaces). However, the model I am using only allows numbers without spaces. Since my application is already fully developed, ...

Creating a custom decision tree in Angular/JS/TypeScript: A step-by-step guide

My current project involves designing a user interface that enables users to develop a decision tree through drag-and-drop functionality. I am considering utilizing GoJS, as showcased in this sample: GoJS IVR Tree. However, I am facing challenges in figuri ...

What steps should I follow to properly set up my tsconfig.json in order to ensure that only the essential files are included when executing npm run build

Introduction I am seeking guidance on how to correctly set up my tsconfig.json file to ensure only the necessary files are included when running npm run build for my projects. I want to avoid any unnecessary files being imported. Query What steps should ...

Is it possible to consolidate this type definition?

I generated the following code snippet: type NumberFields<T, K extends keyof T> = T[K] extends number ? K : never; type AnsFields<T> = SomeOtherList & NumberFields<T, keyof T>; In the code above, SomeOtherList consists of predefined ...

Utilizing Shadow Root and Native Web Components for Seamless In-Page Linking

An illustration of this issue is the <foot-note> custom web component that was developed for my new website, fanaro.io. Normally, in-page linking involves assigning an id to a specific element and then using an <a> with href="#id_name&quo ...

Adding a fresh element to an object array in TypeScript

How can we add a specific value to an array of objects using TypeScript? I am looking to insert the value 1993 into each "annualRentCurrent" property in the sample object. Any suggestions on how to achieve this in TypeScript or Angular? Thank you! #Data ...

I'm struggling to get a specific tutorial to work for my application. Can anyone advise me on how to map a general URL to the HTTP methods of an API endpoint that is written in C

I am struggling to retrieve and display data from a C# Web API using Typescript and Angular. As someone new to Typescript, I followed a tutorial to create a service based on this guide: [https://offering.solutions/blog/articles/2016/02/01/consuming-a-rest- ...

Protected class, yet not transferable

My output varies based on the type of input provided. I have a custom guard in place to protect the input, but I'm still having trouble assigning it to the declared output: type InputType<Sub extends SubType> = { a: Sub, b: string } type SubTyp ...

What is the best method to create a TypeScript dictionary from an object using a keyboard?

One approach I frequently use involves treating objects as dictionaries. For example: type Foo = { a: string } type MyDictionary = { [key: string]: Foo } function foo(dict: MyDictionary) { // Requirement 1: The values should be of type Foo[] const va ...

typescript error: referencing a variable before assigning a value to it in function [2454]

I am currently in the process of creating a store using nextJS I have two variables that are being assigned values from my database through a function let size: Size let ribbonTable: Ribbon async function findSizeCategory(): Promise<v ...

Using Typescript in the package.json as a dependency

After initiating a React project with typescript using the command below: npx create-react-app frontend --template typescript https://i.sstatic.net/8n4O5.png I noticed that the tyepscript, @testing, and @types libraries were added to dependencies rather ...

crafting connections in 3D using TypeORM (ORM)

I attempted to construct a database schema involving users, groups, documents, and permissions. Users can be part of multiple groups Groups can have multiple users Users can possess permissions for documents Groups can have permissions for documents Perm ...

Error: The function $.cookie() is not defined in Angular2 Typescript

After installing @types/jquery, I updated tsconfig.json to include jquery.cookie in the types section. Visual Studio Code indicates that $.cookie is ready for use, but when I execute my code, an error appears in the console stating that $.cookie() is not ...

The type 'Readonly<Ref<Readonly<any>>>' does not have the property 'forEach' available

Having an issue with state management in Vue3 (Pinia) using the Composition API. I successfully retrieved an array called countryCodes and now I want to copy all items from this array into another array called countries defined in the state. However, whe ...

Access specific files within a workspace in VS Code with read-only permissions

Currently, I am engaged in a typescript project within Visual Studio Code. In my workflow, a gulp task is responsible for transferring code to a designated folder. The files copied will be utilized by corresponding files located in the destination folder t ...

What is the best way to incorporate an interface in TypeScript that is both callable and has properties?

Given the scenario where an interface is defined as: interface FooWithBar { ():void; bar():void; } I am struggling with writing the implementation. I attempted the following: function foo(){ } foo.bar = function(){ }; This approach did not wo ...

Error: `__WEBPACK_IMPORTED_MODULE_1_signature_pad__` does not function as a constructor

I recently discovered the angular2-signature-pad library for capturing signatures in my Angular project. I attempted to integrate the library using the following steps: // in .module.ts file import {SignaturePadModule} from "angular2-signature-pad"; @NgMo ...

How is it possible for TypeScript to enable the importing of dependencies that it ultimately cannot utilize during runtime?

Take a look at my sample project by following this link: https://github.com/DanKaplanSES/typescript-stub-examples/tree/JavaScript-import-invalid I have developed a file named main.ts: import uuid from "uuid"; console.log(uuid.v4()); While type ...

Using Angular's [ngIf], [ngIfElse], and [ngIfElseIf] functionalities enables dynamic content rendering

Currently, I have the following code snippet: <ng-container *ngIf="someCondition"> <ng-template [ngIf]="cd.typedType === 'first'" [ngIfElse]="Second"> <div class="row"> fir ...