satyam4p

//Implement a throttler that executes an array of tasks. When the throttler is passed a number, only executes that number of the tasks and passes the other tasks into a queue.

//Throttling is a way/technique to restrict the number of function execution/calls.

/**
 * normal throttle function
 * @param {*} fn
 * @param {*} delay
 * @returns
 */

satyam4p

import { useEffect, useState } from "react";
import useDebounceHook from "./useDebounceHook";

const useResponsive = () => {
  const debounce = useDebounceHook(onResizeHandler, 500, false);

  const [state, setState] = useState({
    isMobile: false,
    isTablet: false,
    isDesktop: false,

satyam4p

//We will now look at pattern that will execute set of given tasks in parallel with given concurrency.

function makeSimpleTask(name) {
  return (cb) => {
    console.log("started");
    setTimeout(() => {
      console.log(name, "completed");
      cb();
    }, Math.random() * 2000);
  };

satyam4p

class AsyncTaskQueue {
  constructor(concurrency) {
    this.concurrency = concurrency;
    this.running = 0;
    this.queue = [];
  }

  pushtask(task) {
    this.queue.push(task);
    process.nextTick(this.next.bind(this));

satyam4p

import { useState } from "react";
import "./styles.css";

const data = [
  {
    id: 1,
    name: "README.md",
  },
  {
    id: 2,