Javascript 为什么此功能会导致浏览器刷新按钮变灰?

Javascript 为什么此功能会导致浏览器刷新按钮变灰?,javascript,chart.js,Javascript,Chart.js,我正在用ChartJS测试一个实时图形,并编写了下面的简单代码。每隔一秒钟,我都想用一些新数据(在数据和标签数组中移位和推入)重新绘制图形。不管它有多难看,它都能工作,并且每秒更新一次图表。但是,每次执行函数时,刷新按钮都会变灰(几毫秒),即使没有与网络交互。为什么? setInterval(function() { var ctx = document.getElementById("line-chart-1").getContext("2d"); var chart1 = w

我正在用ChartJS测试一个实时图形,并编写了下面的简单代码。每隔一秒钟,我都想用一些新数据(在数据和标签数组中移位和推入)重新绘制图形。不管它有多难看,它都能工作,并且每秒更新一次图表。但是,每次执行函数时,刷新按钮都会变灰(几毫秒),即使没有与网络交互。为什么?

setInterval(function() {
    var ctx = document.getElementById("line-chart-1").getContext("2d");
    var chart1 = window.chart1;

    var d1 = chart1.data.datasets[0].data;
    var lab1 = chart1.data.labels;

    var newData = dataPointGenerator(70, 80);

    d1.shift();
    d1.push(newData.data);

    lab1.shift();
    lab1.push(newData.time);

    window.chart1 = new Chart(ctx, {
    type: 'line',
        data: {
            labels : lab1,
            datasets : [
                {
                    label: 'names[0]',
                    fill: false,
                    borderColor: "rgb(75,192,192)",
                    borderCapStyle: 'butt',
                    borderDash: [],
                    borderDashOffset: 0.0,
                    borderJoinStyle: 'miter',
                    pointBorderColor: "rgb(75,192,192)",
                    pointBackgroundColor: "#fff",
                    pointBorderWidth: 1,
                    pointHoverRadius: 5,
                    pointHoverBackgroundColor: "rgb(75,192,192)",
                    pointHoverBorderColor: "rgb(75,192,192)",
                    pointHoverBorderWidth: 2,
                    pointRadius: 1,
                    pointHitRadius: 10,
                    data : d1
            }
        ]
    },
    options: {
        animation : false,
        scales: {
            yAxes: [{
                scaleLabel: {
                    display: true,
                    labelString: 'kW'
                }
            }]
        }
    }
});

function dataPointGenerator(start, end) {
    var rand = Math.floor(Math.random() * (end - start + 1) + start);
    var date = new Date();
    return {
        data : rand,
        time : date
    }
};

我不认为这是导致页面进入加载状态的原因。你是如何加载填充此图表的数据的?我不这么认为。。。我编辑了该问题以显示如何添加数据。能否打开浏览器的调试工具,查看是否存在任何挂起的网络请求?请参见如何在此处打开它们:。如果你有FireFox,你也可以检查他们的开发工具。我检查了chrome开发工具,似乎没有任何网络请求。可能是因为渲染?我不认为这是导致页面进入加载状态的原因。你是如何加载填充此图表的数据的?我不这么认为。。。我编辑了该问题以显示如何添加数据。能否打开浏览器的调试工具,查看是否存在任何挂起的网络请求?请参见如何在此处打开它们:。如果你有FireFox,你也可以检查他们的开发工具。我检查了chrome开发工具,似乎没有任何网络请求。可能是关于渲染吗?