Question

每当调整窗口大小时，我都要求调用方法。我正在使用以下代码 -

  "dependencies": {
    "Microsoft.AspNetCore.AngularServices": "1.0.0-*",
    "Microsoft.AspNetCore.Authentication.Cookies": "1.1.0-preview1-final",
    "Microsoft.AspNetCore.Diagnostics": "1.1.0-preview1-final",
    "Microsoft.AspNetCore.Hosting.Abstractions": "1.1.0-preview1-final",
    "Microsoft.AspNetCore.Identity": "1.1.0-preview1-final",
    "Microsoft.AspNetCore.Identity.EntityFrameworkCore": "1.1.0-preview1-final",
    "Microsoft.AspNetCore.Mvc": "1.1.0-preview1-final",
    "Microsoft.AspNetCore.Razor.Tools": "1.0.0-preview3-final",
    "Microsoft.AspNetCore.Server.IISIntegration": "1.1.0-preview1-final",
    "Microsoft.AspNetCore.Server.Kestrel": "1.1.0-preview1-final",
    "Microsoft.AspNetCore.StaticFiles": "1.1.0-preview1-final",
    "Microsoft.EntityFrameworkCore": "1.1.0-preview1-final",
    "Microsoft.EntityFrameworkCore.Design": "1.1.0-preview1-final",
    "Microsoft.EntityFrameworkCore.Relational": "1.1.0-preview1-final",
    "Microsoft.EntityFrameworkCore.Relational.Design": "1.1.0-preview1-final",
    "Microsoft.EntityFrameworkCore.Sqlite": "1.1.0-preview1-final",
    "Microsoft.EntityFrameworkCore.SqlServer": "1.1.0-preview1-final",
    "Microsoft.EntityFrameworkCore.SqlServer.Design": "1.1.0-preview1-final",
    "Microsoft.EntityFrameworkCore.Tools": {
      "version": "1.0.0-preview3-final",
      "type": "build"
    },
    "Microsoft.EntityFrameworkCore.Tools.Core": "1.0.0-rc2-final",
    "Microsoft.Extensions.Configuration.CommandLine": "1.1.0-preview1-final",
    "Microsoft.Extensions.Configuration.EnvironmentVariables": "1.1.0-preview1-final",
    "Microsoft.Extensions.Configuration.Json": "1.1.0-preview1-final",
    "Microsoft.Extensions.DependencyInjection.Abstractions": "1.1.0-preview1-final",
    "Microsoft.Extensions.FileProviders.Abstractions": "1.1.0-preview1-final",
    "Microsoft.Extensions.Logging": "1.1.0-preview1-final",
    "Microsoft.Extensions.Logging.Abstractions": "1.1.0-preview1-final",
    "Microsoft.Extensions.Logging.Console": "1.1.0-preview1-final",
    "Microsoft.Extensions.Logging.Debug": "1.1.0-preview1-final",
    "Microsoft.Extensions.Options": "1.1.0-preview1-final",
    "Microsoft.Extensions.Options.ConfigurationExtensions": "1.1.0-preview1-final",
    "Microsoft.Extensions.Primitives": "1.1.0-preview1-final"
  },

  "tools": {
    "Microsoft.AspNetCore.Razor.Tools": "1.0.0-preview2-final",
    "Microsoft.EntityFrameworkCore.Tools": "1.0.0-preview3-final"
  },

  "frameworks": {
    "net461": {}
  },

但问题是，每当我调整浏览器onSesize方法的大小时，都会多次触发。

Answer 1

调整大小可能会触发多个事件，一次将其缩小为单个事件，将所有事件发送到序列并进行去抖（或使用去抖动进行限制）以仅处理一次：

resizeEvent$: Subject<MouseEvent> = new Subject<MouseEvent>();

@HostListener('window:resize', ['$event'])
onResize(event){
  this.resizeEvent$.next(event);
}

然后在你的构造函数中，或ngOnInit：

this.resizeEvent$.debounceTime(100).subscribe(this.actualResizeHandler);

这将确保在最后一次调整大小事件之后仅100毫秒，您将进行调整大小，从而忽略多个事件。请注意，这可能会导致饥饿，只要您有事件，debounce就会阻止。另一种方法是将其分块，在本例中为每500 mSecs：

this.resizeEvent$.throttleTime(500).debounceTime(490).subscribe(this.actualResizeHandler);

油门提供只有每500 mSecs中的第一个事件将触发，丢弃以下的事件，debounce提供你实际上在期末的工作，它将工作，因为油门确保没有其他事件在此期间，辩论最终会触发。

注意的两件事：

您获得的事件可能是“旧的”，这意味着，不要依赖它所拥有的数据，直接从您的组件查询大小信息。
为了防止竞争条件和时间问题，去抖动时间要短一些。

Angular2：onResize方法多次触发

1 个答案: