Question

我在我的应用程序中实现了拦截器，它在任何http请求上显示微调器并在获得响应后隐藏。此外，我已经实现了多个http调用的计数器，以便微调器在最后一次调用后关闭。

但现在在某些情况下，假设我有三个http异步调用，我在第二个呼叫到达拦截器之前得到第一个呼叫的响应。由于这种情况，这会导致微调器在屏幕上闪烁，因为它会打开和关闭。

Answer 1

根据我对该问题的理解，您的代码正在“按预期”运行。闪烁不是由您的实现中的错误引起的，而是由“极限情况”引起的：两次连续的$http调用，导致您的加载器屏幕在第一个请求完成之后瞬间关闭在第二个请求发出后很快重新激活。当两个请求足够接近时，会产生闪烁效果：您的最终用户不知道发出了两个顺序请求，他只是看到一个加载屏幕才会在不久之后再次出现。<登记/> 在这种情况下，计算打开的请求无法缓解您的问题：当第一个承诺完成时，第二个承诺尚未完成：计数器仍然是“一个打开请求”，因此在承诺完成后，您的逻辑检测到现在有0个打开请求并停止加载屏幕。

由于这些原因，我能想象的唯一可行的解决方案是在加载屏幕上实现一种“关闭延迟”。通过立即关闭“加载屏幕”，您可以为应用程序提供启动第二个请求的时间。为了实现这一目标，您有两种选择。

第一个也许更干净的是在处理微调器的组件中实现“延迟”。修改.hideSpinner()方法以在经过一定时间延迟后隐藏微调器，并修改.displaySpinner()方法以便取消任何挂起的“hideSpinner”调用。 请注意，如果您使用的是未实现的微调器组件，因此无法轻松修改，这可能不可行。

第二种方法是在拦截器方面工作。您应该已经有一个“结束请求”方法，它检查请求计数器是否已返回0并在这种情况下停止加载屏幕您的代码看起来应该类似于（注意，这使用的是Typescript）：

private startRequest(): void {
    // If this is the first request,start the spinner
    if (this.requestCount == 0) {
        this.loadingOverlayService.start();
    }

    this.requestCount++;
}
private endRequest(): void {
    // No request ongoing, so make sure we don’t go to negative count.
    // Should never happen, but it is better to be safe than sorry.
    if (this.requestCount == 0)
        return;

    this.requestCount--;
    // If it was the last request, call the service to stop the spinner.
    if (this.requestCount == 0) {
        this.loadingOverlayService.stop();
    }
}

只需在endRequest方法上添加setTimeout延迟。这样，实际的“这是最后一次请求”检查将被延迟，让您的应用程序有时间在微调器关闭之前启动新请求。请注意，这引入了一个新问题：现在任何加载微调器都将超过所需的1Δ，其中Δ是您正在使用的超时。在大多数现实世界的情况下，这实际上不是一个问题，你不希望你的加载微调器“太快”，以避免在非常短的请求时出现类似的闪烁问题。

您的代码应如下所示：

private endRequest(): void {
    setTimeout(function() {
        if (this.requestCount == 0)
        return;

        this.requestCount--;

        if (this.requestCount == 0) {
            this.loadingOverlayService.stop();
        }
    }, 1000);        
}

如前所述，现在检查将在请求结束后运行一秒钟。这将为您的第二个请求提供启动时间并递增计数器，然后处理程序可以检查是否还有其他待处理请求等待。因此，您的加载屏幕应该快速关闭并重新打开，而是保持打开状态，从而消除闪烁的现象。

PS：还有第三个选项，我没有讨论，因为你的帖子给我的印象是它不适用于你的情况，所以我会在这个脚注中发布它作为未来读者的暗示。

如果您的所有请求都已预先确定，这意味着它们可以同时启动（没有请求必须等待前一个请求）您可能能够使用$q.all()将它们链接到累积承诺中。可以避免闪烁效应，但需要进一步测试以确保此解决方案符合您的需求。最后，setTimeout选项可能是最方便的选择，最大的努力/成本/质量妥协。

处理多个http调用角度的微调器

1 个答案: