Javascript Interview Questions: Pagination, Memoization, Event Bubbling

Photo by Claudio Schwarz on Unsplash

1. What is pagination?

Pagination is a sequence of pages which are connected and have similar content. It is important to note that even when the content on a section of a page is split into distinct pages, we will still define that as pagination.

Why use pagination?

  1. Easier navigation

Real-Time Scenario: Let’s take the amazon website or Flipkart website for displaying available products in their database. Let suppose they have 1 million products with them. If they are trying to show all the items at a time, the customer must wait more time like one day to see all the product lists.

Introduction to Pagination in JavaScript

How Should we Tackle this Situation?

The syntax for Pagination:

//function for creating page list
function prepareList() {
for (count = 0; count < 100; count++)
//add iteration elements to an array
createPages= getPageNumber();//user defined function
}
//function per creating pages
function preparePages() {
var start= ((presentPage - 1) * countPerEachPage);
var end = start+ countPerEachPage;
listPage= list.slice(start, end);
//call some user defined methods to pagination functionality
}

Example:

Hung, Chien-Hsiang (chienhsiang-hung.github.io)
// make Pagination
mediumPromise.then(function() {
// make Pagination reponsive
pageSize = (width < 768) ? 1 : 3;
var pageCount = $(".medium-card").length / pageSize;
$("#pagin").append(`<a class="page-link" href="javascript:void(0);">&laquo;</a>`);
for (var i = 0; i < pageCount; i++) {
$("#pagin").append(`<a class="page-link" href="javascript:void(0);">${(i + 1)}</a>`);
}
$("#pagin").append(`<a class="page-link" href="javascript:void(0);">&raquo;</a>`);
$("#pagin a:nth-child(2)").addClass("active");showPage = function (page) {
$(".medium-card").hide();
$(".medium-card").each(
function (n) {
if (n >= pageSize * (page - 1) && n < pageSize * page)
$(this).show();
}
);
}
showPage(1);
var pageNum = 1;
$("#pagin a").click(function () {
if ($(this).text() == "«") {
// pre button error handling
pageNum--;
if (pageNum < 1) {
pageNum++;
return false;
}
else {
showPage(pageNum)
}
} else if ($(this).text() == "»"){
// nex button error handling
pageNum++;
if (pageNum > pageCount) {
pageNum--;
return false;
}
else {
showPage(pageNum)
}
} else {
pageNum = parseInt($(this).text());
showPage(pageNum)
}
// refresh the pagebutton <a>
$("#pagin a").removeClass("active");
$(`#pagin a:nth-child(${pageNum+1})`).addClass("active");

});
});

chienhsiang-hung.github.io/EmbeddingMedium.js at main · chienhsiang-hung/chienhsiang-hung.github.io

2. What is Memoization?

In simpler words, it consists of storing in cache the output of a function, and making the function check if each required computation is in the cache before computing it.

A cache is simply a temporary data store that holds data so that future requests for that data can be served faster.

Memoization is a simple but powerful trick that can help speed up our code, especially when dealing with repetitive and heavy computing functions.

3. Bubbling and capturing

Bubbling

When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors.

Let’s say we have 3 nested elements FORM > DIV > P with a handler on each of them:

<style>
body * {
margin: 10px;
border: 1px solid blue;
}
</style>
<form onclick="alert('form')">FORM
<div onclick="alert('div')">DIV
<p onclick="alert('p')">P</p>
</div>
</form>

A click on the inner <p> first runs onclick:

  1. Then on the outer <div>.
  2. Then on the outer <form>.
  3. And so on upwards till the document object.

So if we click on <p>, then we’ll see 3 alerts: pdivform.

The process is called “bubbling”, because events “bubble” from the inner element up through parents like a bubble in the water.

Almost all events bubble.

The key word in this phrase is “almost”.

For instance, a focus event does not bubble. There are other examples too, we’ll meet them. But still it’s an exception, rather than a rule, most events do bubble.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store