警告盒在Chrome中的性能

Question

我正在尝试使用警报框来实现预定通知。我从包含当天所有通知的API响应中获得一个JSON对象。通知有两类：PTP和Call back。第一次通知是准时的，但之后的通知会从预定时间随机延迟一段时间。这个问题特别发生在Chrome上。火狐不会给我这个问题。

需要注意的一点是，一旦用户单击警报框中的“是”，Firefox就会刷新窗口，但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

在浏览器IE和Firefox中，内部计时器继续“滴答”，同时显示警报/确认/提示，但在Chrome、Opera和Safari中，内部计时器变成“冻结”。 因此，如果您运行上面的代码，并且在一段时间内不关闭警报窗口，那么在Firefox/IE中，下一个警报将立即显示(从上一次调用中传递的2秒)，以及在Chrome/Opera/Safari中显示-在2秒后(在警报期间计时器没有勾选)。

我用你的代码测试并证实了这一点。打开警报消息的时间越长，打开第二条警报消息所需的时间就越长。