CollegeStash

Throttling function calls with a Queue in Javascript (ES6)

Post author By Shiva Charan Devabhaktuni
Post date August 17, 2020

The following ES6 Javascript code, helps to throttle function calls without discarding them. It uses a queue to keep track of all the function calls. We can use the reset method to reset the queue and the setTimeout() method.

const throttle = (fn, delay) => {

let timeout;

let noDelay = true;

let queue = [];

const start = () => {

if (queue.length) {

const first = queue.shift();

fn.apply(first.context, first.arguments);

timeout = setTimeout(start, delay);

} else {

noDelay = true;

}

};

const ret = (...rest) => {

queue.push({

context: this,

arguments: [...rest]

});

if (noDelay) {

noDelay = false;

start();

}

};

ret.reset = () => {

clearTimeout(timeout);

queue = [];

};

return ret;

};

/* Usage */

const print = (number) => {

console.log(`Hello World! ${number}`);

}

const test = throttle(print, 3000);

test(1);

test(2);

test(3);

// test.reset(); This will clear the queue and hence the above test case will only output the first line.

// Output:

// Hello World! 1

// Hello World! 2

// Hello World! 3

Demo

Tags amazon, array, code, delay, demo, ecmascript, engineer, facebook, fb, fifo, first in first out, front end, functions, import, interview, javascript, jsfiddle, L3, L4, L5, live, methods, paypal, reuse, run, sde, swe, throttling, timeout, timer, walmart

interview

Longest Palindromic Substring

Post author By Shiva Charan Devabhaktuni
Post date July 27, 2020

/**
 * @param {string} s
 * @return {string}
 */
var longestPalindrome = function(s) {
  if (!s || s.length === 0)
    return '';
  let start = 0,
    end = 0;
  for (let i = 0; i < s.length; i++) {
    // There can be 2n - 1 centers for the palindromes. We can 
    // include each character and the space in between the       
    // characters.
    let l1 = expandAroundCenters(s, i, i);
    let l2 = expandAroundCenters(s, i, i + 1);
    let l = Math.max(l1, l2);
    if (l > end - start) {
      start = i - Math.floor((l - 1) / 2);
      end = i + Math.floor(l / 2);
    }
  }
  return s.substring(start, end + 1);
};

var expandAroundCenters = function(s, left, right) {
  while (left >= 0 &&
    right < s.length &&
    s.charAt(left) === s.charAt(right)) {
    left--;
    right++;
  }
  return right - left - 1;
}

// Time Complexity O(n ^ 2)
// Space Complexity O(1)

Tags es5, es6, javascript, leetcode, time complexity

interview

Smooth Animation

Post author By Shiva Charan Devabhaktuni
Post date July 9, 2020

The following is a method to perform smooth animation of an element from left to right given the duration and distance. 60 frames per second (fps) is the minimum required frame rate for smooth animation. In this example, the element is being animated from left to right at 60 fps for a duration of 2 seconds (2000 ms) and a distance of 100px.

Javascript (ES6)

const animate = (element, duration, distance) => {

let start;

const step = (timestamp) => {

if (start === undefined)

start = timestamp;

const elapsed = timestamp - start; // milliseconds

// 60 fps min required for smooth animation. 60 fps = 60 / 1000 fpms

element.style.transform = 'translateX(' + Math.min(0.06 * elapsed, distance) + 'px)';

if (elapsed < duration) { // Stop the animation after 2 seconds

window.requestAnimationFrame(step); // See more at: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

}

window.requestAnimationFrame(step);

}

animate(document.getElementById('child') , 2000 , 100 );

HTML

</div>

CSS

#parent {

height: 200px;

width: 200px;

background-color: lightblue;

}

#child {

height: 100px;

width: 100px;

background-color: lightgreen;

}

DEMO

Tags css, facebook, frontend

interview

Random Pick Index

Post author By Shiva Charan Devabhaktuni
Post date June 29, 2020

Given an input array that consists of numbers that may consist of duplicates, return the position of the number that is picked. This position has to be a “Random Pick Index” if the picked number has duplicates.

Example: Input: [1, 2, 4, 4, 4], Pick -> 4 then you can return 2, 3, or 4 randomly with equal probability. If 1 is the pick then 0 needs to be returned as there is only one occurrence at 0.

/**

* @param {number[]} nums

var Solution = function(nums) {

this.obj = {};

for (let i = 0; i < nums.length; i++) {

if (this.obj[nums[i]] === undefined)

this.obj[nums[i]] = [];

this.obj[nums[i]].push(i);

}

};

/**

* @param {number} target

* @return {number}

Solution.prototype.pick = function(target) {

var dupes = this.obj[target].length;

return dupes === 1 ?

this.obj[target][0] :

this.obj[target][Math.floor(dupes * Math.random())];

};

/**

* Your Solution object will be instantiated and called as such:

* var obj = new Solution(nums)

* var param_1 = obj.pick(target)

Tags es5, es6, facebook, js, medium

interview

DFS DOM (ES6)

Post author By Shiva Charan Devabhaktuni
Post date June 16, 2020

<div id="root">
  <div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>
  <div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>
</div>

const root = document.getElementById("root");

const walk = function (root) {
  let obj = root.children;
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      if (obj[key].textContent === "1") 
        console.log(obj[key]);
      else 
        walk(obj[key]);
    }
  }
};

walk(root);

Tags depth first search, facebook, fb, front end

Front End Engineer Interview Prep

General Interview Questions