Chrome 中的警告框性能

Question

我正在尝试使用警报框来实现预定的通知。我从包含当天所有通知的 API 响应中得到一个 JSON 对象。有两类通知 PTP 和 Call back。第一个通知是准时的，但之后的通知会比预定时间延迟一个随机时间。此问题专门发生在 Chrome 中。 Firefox 没有给我这个问题。

需要注意的一点是，一旦用户单击警告框中的 'Yes'，Firefox 就会刷新 window，但 Chrome 不会刷新。这里的问题是什么？似乎是性能问题。

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

根据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).

我用你的代码测试并确认了这一点。您打开提醒消息的时间越长，打开第二条提醒消息所需的时间就越长。

Chrome 中的警告框性能

Alert boxes performance in Chrome

javascript

alert

reactjs