Alert boxes performance in Chrome

Question

I am trying to use alert boxes for implementing scheduled notifications. I am getting a JSON object from an API response containing all the notifications for the day. There are two categories of notifiactions PTP and Call back . The first notification is on time but the one after that are delayed for a random time from their scheduled time. This problem is happening specifically in Chrome. Firefox isn't giving me this issue.

A point to be noted is that Firefox refreshes the window once the user clicks on 'Yes' in the alert box but Chrome does not do that. What is the issue here? Seems like a performance issue.

import React, { Component } from "react";
import ReactDOM from "react-dom";

class Dashboard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ptp_list: {
        "0": { customer_id: 0, ptp: "15:14:20", callback: "" },
        "1": { customer_id: 1, ptp: "", callback1: "" },
        "2": { customer_id: 2, ptp: "", callback: "" }
      }
    };
    this.updatePTP = this.updatePTP.bind(this);
  }
  componentDidMount() {
    this.updatePTP();
  }

  updatePTP() {
    //initialize time variables
    var currenttime = new Date();
    var i = 0;
    //find current time upto milliseconds

    //get notifications list
    var notificationsList = JSON.parse(JSON.stringify(this.state.ptp_list));

    //store notifications list in localstorage
    window.localStorage.setItem(Constant.PTP_LIST, JSON.stringify(notificationsList));

    //find the number of ptp/callback notifications for the day
    var objectsList = Object.keys(notificationsList).length;

    for (var i = 0; i < objectsList; i++) {
      var ptp_time_list = [];          var callback_time_list = [];
      var ptp_time_list_milli = new Date();
      var callback_time_list_milli = new Date();

      currenttime.setHours(currenttime.getHours(), currenttime.getMinutes(), currenttime.getSeconds(), currenttime.getMilliseconds());

      //check PTP notifications 
      if (notificationsList[i].ptp != "" && notificationsList[i].ptp != null) {

        //remove ':' from time 
        ptp_time_list.push(notificationsList[i].ptp.split(':'));
        //create date object for storing time and to perform operations later while using setTimeout function
        ptp_time_list_milli.setHours(ptp_time_list[0][0], ptp_time_list[0][1], ptp_time_list[0][2], 0);

        if (ptp_time_list_milli >= currenttime) {

          //set timeout for PTP notification alert
          setTimeout(function (i) {
            alert("PTP Reminder!\n\nCustomer ID : " + notificationsList[i].customer_id);

          }, (ptp_time_list_milli - currenttime), i);
        }
      }

      //same process as above
      if (notificationsList[i].callback != "" && notificationsList[i].callback != null) {
        callback_time_list.push(notificationsList[i].callback.split(':'));

        callback_time_list_milli.setHours(callback_time_list[0][0], callback_time_list[0][1], callback_time_list[0][2], 0);

        if (callback_time_list_milli >= currenttime) {

          //set timeout for Call back notification alert
          setTimeout(function (i) {

            alert("Callback Reminder!\n\nCustomer ID : " + notificationsList[i].customer_id);
          }, (callback_time_list_milli - currenttime), i);

        }
      }
    }

  }  

Answer 1

According to javascript.info :

In browsers IE and Firefox the internal timer continues “ticking” while showing alert/confirm/prompt, but in Chrome, Opera and Safari the internal timer becomes “frozen”.

So if you run the code above and don't dismiss the alert window for some time, then in Firefox/IE next alert will be shown immediately as you do it (2 seconds passed from the previous invocation), and in Chrome/Opera/Safari – after 2 more seconds (timer did not tick during the alert).

I tested and confirmed this with your code. The longer you keep your alert message open the longer it takes for your second alert message to open.