JSFiddle - React, Tailwind, and code Playground

by vaheed akhtar

HTML

<input type="text" onkeyup="betterFunction()"/>
<h1 />
<button id="click1">Click1</button>
<button id="click2">Click2</button>

JavaScript

// Debouncing in Javascript
let counter = 0;
const getData = () => {
  // calls an API and gets Data
  console.log("Fetching Data ..", counter++);
}

const debounce = function (fn, d) {
  let timer;
  return function () {
    let context = this,
      args = arguments;
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(context, arguments);
    }, d);
  }
}
document.getElementById('click1').addEventListener('click', debounce(getData, 1000));


//const betterFunction = debounce(getData, 300);
console.log('-------------Throttling--------------');
const loggerFunc = () => {
  console.count("Throttled Function");
}

const throttle = (fn, limit) => {
  let flag = true;
  return function(){
    let context = this;
    let args = arguments;
    if(flag){
      fn.apply(context, args);
      flag = false;
      setTimeout(() => {
        flag=true;
      }, limit);
    }
  }
}

//const betterLoggerFunction = throttle(loggerFunc, 1000);
document.getElementById('click2').addEventListener('click', throttle(loggerFunc, 1000));
//window.addEventListener("resize",betterLoggerFunction);

// This is the normal Function without Throttling
//Check the console for the difference between the calls of Normal Function and the Throttled Function 
const normalFunc = () => {
  console.count("Normal Function");
}

window.addEventListener("resize",normalFunc);


let object = {
    Catalog: ["Parts", "Accessories"],
    Modality:  ["LCSPatientMonitoring", "maternal_infant_care_equipment"],
    Scan: []
  }
  let str = '';
  let count = 0;
  for(const ob in object) {
    if(object[ob].length> 0) {
    ++count;
      obj = `${ob}=${object[ob].join('|')}`;
      if(count === 1)
       str+=obj;
      else
      str+= ','+obj;
    }
  }
  //console.log(str);

// advancedfilter=Catalog=Parts|Accessories,Modality=DLCSPatientMonitoring|Cmaternal_infant_care_equipment
let emp = {
  name: 'JOHN',
  address: {
    personal: {
      city: 'Mumbai',
      state: 'MH',
      contact:...