Create a composition of several debounce promises in JavaScript

Question

Create a composition of several debounce promises in JavaScript

I am looking for a way to efficiently manage multiple costly server calls by continuously invoking a function that accepts a key and returns a promise containing an object. This object is guaranteed to have the requested key along with additional values, including unrelated keys. The desired behavior of this function would be:

When first called, it should generate a promise.
Subsequent calls should accumulate keys to be sent to the server.
All calls will return the same promise until there has been 100ms of inactivity.
If no new calls are made within 100ms, all accumulated keys should be sent to the server for processing.
If a new call is made while waiting for a response from the server, it should initiate a fresh promise with its own set of pending keys.
Upon receiving the response from the server, the pending promise should be resolved.

Is there any npm package available that can assist with implementing this functionality, or should I develop it from scratch?

javascript npm es6-promise

Answer 1

Answer №1

My search for a way to consolidate server requests using a single promise in NPM didn't yield any clear results. However, I will share some mockup code that utilizes ES6 promises, which could potentially serve as a starting point for a solution in the absence of other ideas. Please note that this code is not guaranteed to work perfectly...

/*******  application code  ********/

function requestKeys(keyArray) {
    // Promise an object with values for keys in keyArray:
    // Use asynchronous code to fetch values for keys in keyArray,
    // Return a promise for the parsed result object.
    // ...
}

const latency = 100; // Maximum delay between getting a key and sending a request

/********  generic code *********/

var getKey = ((requestKeys, latency) => {
    // Return a function that promises a key value object
    var promise = null;
    var resolve = null;
    var reject = null;
    var pendingKeys = null;

    var defer = () => {
        promise = new Promise((r, j) => {resolve = r; reject = j});
        pendingKeys = [];
    };

    var running = false;
    var timesUp = () => {
        resolve(requestKeys(pendingKeys));
        running = false;
    }
    var addKey = (key) => {
        if(!running) {
            defer();
            setTimeout(timesUp, latency);
            running = true;
        }
        pendingKeys.push(key);
        return promise;
    }
    return addKey;
})(requestKeys, latency);


/*******   test code   *******/

// Redefine requestKeys to provide an object with key strings as key values,
// Resolve the returned promise synchronously for testing:

function requestKeys(keyArray) {
    var keyObj = keyArray.reduce(((obj, v) => ((obj[v] = v), obj)), {});
    return new Promise((resolve, reject) => resolve(keyObj));
}

var log = obj => console.log(JSON.stringify(obj));

// Quickly retrieve two keys
getKey("holas").then(log);
getKey("buono").then(log);

// Wait and retrieve another key
setTimeout(function(){getKey('later').then(log)}, 500);

Answer 2

My search for a way to consolidate server requests using a single promise in NPM didn't yield any clear results. However, I will share some mockup code that utilizes ES6 promises, which could potentially serve as a starting point for a solution in the absence of other ideas. Please note that this code is not guaranteed to work perfectly...

/*******  application code  ********/

function requestKeys(keyArray) {
    // Promise an object with values for keys in keyArray:
    // Use asynchronous code to fetch values for keys in keyArray,
    // Return a promise for the parsed result object.
    // ...
}

const latency = 100; // Maximum delay between getting a key and sending a request

/********  generic code *********/

var getKey = ((requestKeys, latency) => {
    // Return a function that promises a key value object
    var promise = null;
    var resolve = null;
    var reject = null;
    var pendingKeys = null;

    var defer = () => {
        promise = new Promise((r, j) => {resolve = r; reject = j});
        pendingKeys = [];
    };

    var running = false;
    var timesUp = () => {
        resolve(requestKeys(pendingKeys));
        running = false;
    }
    var addKey = (key) => {
        if(!running) {
            defer();
            setTimeout(timesUp, latency);
            running = true;
        }
        pendingKeys.push(key);
        return promise;
    }
    return addKey;
})(requestKeys, latency);


/*******   test code   *******/

// Redefine requestKeys to provide an object with key strings as key values,
// Resolve the returned promise synchronously for testing:

function requestKeys(keyArray) {
    var keyObj = keyArray.reduce(((obj, v) => ((obj[v] = v), obj)), {});
    return new Promise((resolve, reject) => resolve(keyObj));
}

var log = obj => console.log(JSON.stringify(obj));

// Quickly retrieve two keys
getKey("holas").then(log);
getKey("buono").then(log);

// Wait and retrieve another key
setTimeout(function(){getKey('later').then(log)}, 500);

Create a composition of several debounce promises in JavaScript

Answer №1

Similar questions

How to get the most out of the $scope variable?

What happens when Google Polymer platform is used without defining _polyfilled?

What are the techniques for integrating PHP code into JavaScript/Ajax?

pictures in photo display

Error encountered when using prisma findUnique with where clause

Transferring information to an outside document using Ajax

JavaScript code to generate a random color for the box shadow effect

Accessing a webpage solely by logging in prevents unauthorized access

Is there a way to transform JSON text into a JSON object?

Access Images from Server using Front-End Technology

Utilizing URL Parameters in MEANJS

Ways to verify that window.open is being invoked from a React component

What is the syntax for accessing a nested object within the .find method?

Tips for utilizing mermaid sections in quarto?

MongoDB suggests

To elevate your Vue.js development in 2021, enhance your project by installing sass-loader and node-s

text box with an immobile header

Choosing a single item from multiple elements in React using React and typescript

How can Angular JS detect the names of the CSS files being used in an HTML page?

Monitoring inbound and outbound traffic in express middleware