Question

我有一个基本的Javascript / JQuery应用程序，我现在转移到Angular2，使用material.angular.io作为我的UI。

在旧版本中，当我使用“setInterval（func，200）;”时每隔200ms查询一次服务器，它每200ms调用一次，即使在使用JQuery的append（内容）或html（内容）函数添加DOM元素时也是如此。

现在在Angular2中，虽然DOM使用* ngFor更改并且更改很大（从服务器获取~200行并将其显示为具有材质组件（如切换按钮）的表行），所有内容都会冻结约1秒钟。服务器的日志告诉我，在再次恢复每200ms之前，呼叫确实停止了大约1秒。但是当我将DOM元素添加到较小的组中时（即每200毫秒有10个项目），那么一切都很好。

当我使用F11切换全屏时，当浏览器重新绘制布局以匹配新窗口大小时，也会发生这种情况。

使用Chrome的调试控制台，我可以看到“Timer Fired（zone.js：2087）”显示“Recurring handler take 731.18 ms”警告。我不确定问题是因为我的代码还是因为它是一个material.io问题，但我认为Angular的setInterval与普通的JavaScript setInterval不同？

以下是相关代码：

15:40:25.229 stat.service.ts:108 200
15:40:25.430 stat.service.ts:108 201
15:40:25.630 stat.service.ts:108 201
15:40:25.831 stat.service.ts:108 201
15:40:26.031 stat.service.ts:108 200
15:40:26.235 stat.service.ts:108 203
15:40:26.435 stat.service.ts:108 201
15:40:26.636 stat.service.ts:108 201
15:40:26.838 stat.service.ts:108 202
15:40:27.039 stat.service.ts:108 201
15:40:27.895 stat.service.ts:108 856 // WHEN THE COMPONENT LOADS
15:40:28.200 stat.service.ts:108 305
15:40:28.442 stat.service.ts:108 242
15:40:28.679 stat.service.ts:108 237
15:40:28.901 stat.service.ts:108 221
15:40:29.131 stat.service.ts:108 231
15:40:29.363 stat.service.ts:108 231

来自服务器的日志显示上次查询的时间：

  private void uiBind() {
    webView = (WebView) findViewById(R.id.web_view);
    webView.setWebViewClient(new FileWebView());
    webView.getSettings().setLoadsImagesAutomatically(true);
    webView.getSettings().setJavaScriptEnabled(true);
    webView.getSettings().setAllowFileAccess(true);

    if (mode == Constant.PDF_FILE) {
        webView.loadUrl("http://docs.google.com/gview?embedded=true&url="
                + "http://www.5gamericas.org/files/2714/1471/2645/4G_Americas_Recommendations_on_5G_Requirements_and_Solutions_10_14_2014-FINALx.pdf");

    } else if (mode == Constant.DOC_FILE) {
        webView.loadUrl("http://docs.google.com/gview?embedded=true&url="
                + "http://ijsetr.com/uploads/4256135G%20Mobile%20Wireless%20Technology.docx");

    } else if (mode == Constant.EXCEL_FILE) {
        webView.loadUrl("http://docs.google.com/gview?embedded=true&url="
                + "http://download.microsoft.com/download/1/4/E/14EDED28-6C58-4055-A65C-23B4DA81C4DE/Financial%20Sample.xlsx");
    }
}

public class FileWebView extends WebViewClient {

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        // TODO Auto-generated method stub
        view.loadUrl(url);
        return true;
    }

    @Override
    public void onPageFinished(WebView view, String url) {
        // TODO Auto-generated method stub
        super.onPageFinished(view, url);

    }
}

Answer 1

这可能是Angular中ChangeDetection的问题。当您更改对象时，它会渲染整个对象。尝试在组件中实现ChangeDetectionStrategy，看看是否有任何改进。您的组件代码如下所示：

@Component({
  selector: "your-comp",
  templateUrl: "./your.component.html",
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class YourComponent{
  constructor(private cdr: ChangeDetectorRef) {}

 // this.cdr.markForCheck(); use code for change on DOM when you get data in observable
}

希望它会有所帮助

当dom改变时，Angular2 setinterval被阻塞

1 个答案: