Question

所以我的PHP页面有问题。基本上，我有一个倒计时计时器，可以计数到300秒，因为每5分钟我会刷新一次页面上的数据，而不进行完全刷新。倒数到0秒后，倒数计时器会在300秒后重新启动。问题在于，加班时间太多了xhr请求。

在前五分钟之后，它仅执行两个请求。该网页等jquery正在加载。但是又过了五分钟（现在是现在的10分钟），它发出了4个请求：两次是网页，两次是jquery。因此，我们总共有6个请求。并且请求数量不断增加！它每5分钟运行一次，一小时达到2000多个请求！因此，它只会吃掉用户的CPU，并且还会等待所有请求加载，然后再次启动我的倒数计时器，这意味着它不会像我想要的那样每5分钟刷新一次数据。

这是代码：

@using TesteBlazor.Shared
@using TesteBlazor.Shared.Models
@page "/clientes"
@using Microsoft.JSInterop
@inject HttpClient Http

<h1> Blazor - CRUD com EF Core</h1>
<hr />
<table width="100%" style="background:#05163D;color:honeydew">
    <tr>
        <td width="20">&nbsp;</td>
        <td>
            <h2>Cadastro de Clientes</h2>
        </td>
        <td>&nbsp;</td>
        <td align="right">
            <button class="btn btn-info" onclick="@AddNovoCliente">Incluir Novo Cliente</button>
        </td>
        <td width="10">&nbsp;</td>
    </tr>
    <tr>
        <td colspan="2"></td>
    </tr>
</table>
<hr />
<form>
    <table class="form-group">
        <tr>
            <td>
                <label for="Name" class="control-label">Código</label>
            </td>
            <td>
                <input type="text" class="form-control" bind="@cliente.ClienteId" readonly />
            </td>
            <td width="20">&nbsp;</td>
            <td>
                <label for="Name" class="control-label">Nome</label>
            </td>
            <td>
                <input type="text" class="form-control" bind="@cliente.Nome" />
            </td>
        </tr>
        <tr>
            <td>
                <label for="Email" class="control-label">Email</label>
            </td>
            <td>
                <input type="text" class="form-control" bind="@cliente.Email" />
            </td>
            <td width="20">&nbsp;</td>
            <td>
                <label for="Pais" class="control-label">Pais</label>
            </td>
            <td>
                <input type="text" class="form-control" bind="@cliente.Pais" />
            </td>
        </tr>
        <tr>
            <td>
                <button type="submit" class="btn btn-success" onclick="@(async () => await AddCliente())"
                        style="width:220px;">
                    Salvar
                </button>
            </td>
        </tr>
    </table>
</form>
<table width="100%" style="background:#0A2464;color:honeydew">
    <tr>
        <td width="20">&nbsp;</td>
        <td>
            <h2>Detalhes dos Clientes</h2>
        </td>
    </tr>
    <tr>
        <td colspan="2"></td>
    </tr>
</table>
@if (_clientes == null)
{
    <p><em>Carregando...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Codigo</th>
                <th>Nome</th>
                <th>Email</th>
                <th>Pais</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var cli in _clientes)
            {
                <tr>
                    <td>@cli.ClienteId</td>
                    <td>@cli.Nome</td>
                    <td>@cli.Email</td>
                    <td>@cli.Pais</td>
                    <td>
                        <button class="btn btn-primary" onclick="@(async () => await EditCliente(@cli.ClienteId))"
                                style="width:110px;">
                            Editar
                        </button>
                    </td>
                    <td>
                        <button class="btn btn-danger" onclick="@(async () => await DeleteCliente(@cli.ClienteId))">
                            Deletar
                        </button>
                    </td>
                </tr>
            }
        </tbody>
    </table>
}
@functions {

Cliente[] _clientes;

Cliente cliente = new Cliente();
string ids = "0";
bool exibeLinhaIncluida = false;

//carrega clientes
protected override async Task OnInitAsync()
{
    _clientes = await Http.GetJsonAsync<Cliente[]>("/api/Clientes/");
}
//adicionar novo cliene
void AddNovoCliente()
{
    cliente = new Cliente();
}
// Adicionar detalhes
protected async Task AddCliente()
{
    if (cliente.ClienteId == 0)
    {
        await Http.SendJsonAsync(HttpMethod.Post, "/api/Clientes/", cliente);
    }
    else
    {
        await Http.SendJsonAsync(HttpMethod.Put, "/api/Clientes/" + cliente.ClienteId, cliente);
    }
    cliente = new Cliente();
    _clientes = await Http.GetJsonAsync<Cliente[]>("/api/Clientes/");
}
// Editar
protected async Task EditCliente(int clienteID)
{
    ids = clienteID.ToString();
    cliente = await Http.GetJsonAsync<Cliente>("/api/Clientes/" + Convert.ToInt32(clienteID));
}
// deletar
protected async Task DeleteCliente(int clienteID)
{
    ids = clienteID.ToString();
    await Http.DeleteAsync("/api/Clientes/" + Convert.ToInt32(clienteID));
    _clientes = await Http.GetJsonAsync<Cliente[]>("/api/Clientes/");
}
}

还有HTML部分：

function progress(timeleft, timetotal, $element) {
var progressBarWidth = timeleft * $element.width() / timetotal;
$element
    .find('div')
    .animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, "linear")
    .html(timeleft + " secondes restantes");
if(timeleft > 0) {
    setTimeout(function() {
        progress(timeleft - 1, timetotal, $element);
    }, 1000);
}
};

progress(300, 300, $('#progress'));

$(document).ready(function() {
var btn = document.createElement("div");
var refreshId = setInterval(function() {
    $("#body").load('/app/phase/dashboard.php?B=winciel');

    }, 300000); // 300000
$.ajaxSetup({ cache: false });
});

“ body” div在页面末尾结束。那里也有一个包含刷新数据的标签，但我认为这里不需要。

正如您在屏幕截图上所看到的，在25分钟内有58个请求，这是一个问题。因为每5分钟只发送2个请求，所以应该发出（25/5）* 2 = 5 * 2 = 10个请求，而不是58个。

在此先感谢您对我的帮助！

Answer 1

您似乎正在使用load加载整个页面，包括触发间隔的<script>。

每次加载新数据时，都会启动另一个运行间隔。

创建一个仅提供所需数据的HTTP终结点，并在不使用脚本和页面不需要的其他页面的情况下加载它。

XHR请求相乘会导致网页变慢

1 个答案: