Javascript 纯CSS微调器冻结

我有一个纯CSS微调器，我想在JavaScript执行其他工作时显示它—异步调用，然后遍历大约10000个元素的数组。微调器在正确的时间出现，但在代码中的某个点被命中时会冻结。在下面的代码中，“一”、“二”和“三”的console.logs基本上是立即发生的-然后有一个很长的暂停，当我的微调器冻结时，“四”和“五”一起注销，我的内容加载。所以基本上我知道console.log'three'和console.log'three'之间的代码：

我尝试的每个纯CSS微调器都会出现这种情况

---

我错误地认为我的JavaScript不应该冻结我的纯CSS微调器吗？为什么代码会冻结它？

JavaScript在UI线程上运行，因此它仍然会阻止仅使用CSS的微调器。您需要将工作移出UI线程或将其拆分，以便UI有时间进行更新

根据您需要支持的浏览器，您可能可以使用Web Workers。有关浏览器支持或示例，请参见

您还可以一次处理一条或10条或100条记录，并在window.setTimeout或window.requestAnimationFrame中调用每个批。尝试类似以下未测试代码的操作：

如果希望每个批处理多个项目，可以在processBatch中有一个循环，循环遍历少量项目

---

旁注：如果data.response是字符串，请参阅上面@gelliot181的注释。

JavaScript在UI线程上运行，因此它仍然会阻止仅CSS微调器。您需要将工作移出UI线程或将其拆分，以便UI有时间进行更新

根据您需要支持的浏览器，您可能可以使用Web Workers。有关浏览器支持或示例，请参见

您还可以一次处理一条或10条或100条记录，并在window.setTimeout或window.requestAnimationFrame中调用每个批。尝试类似以下未测试代码的操作：

如果希望每个批处理多个项目，可以在processBatch中有一个循环，循环遍历少量项目

---

旁注：如果data.response是一个字符串，请参见上面的@gelliot181注释。

是否仅使用微调器？别的？可能是整个浏览器？您是否尝试过禁用javascript以查看微调器是否冻结？是否在所有浏览器中都相同？在不同的浏览器中比较它的效率可能会给你一个透视图。你正在通过使用for循环冻结渲染器。response.findx=>x.ticker===text将比循环好得多。查看代码，您似乎只希望有一条记录与条件text===response[i]匹配。ticker。在这种情况下，从异步调用返回10000条记录不是一种有效的方法。如果您能够控制异步API，那么更新它会更好。如果没有，@Brandon的回答应该对你有帮助。只有纺纱工？别的？可能是整个浏览器？您是否尝试过禁用javascript以查看微调器是否冻结？是否在所有浏览器中都相同？在不同的浏览器中比较它的效率可能会给你一个透视图。你正在通过使用for循环冻结渲染器。response.findx=>x.ticker===text将比循环好得多。查看代码，您似乎只希望有一条记录与条件text===response[i]匹配。ticker。在这种情况下，从异步调用返回10000条记录不是一种有效的方法。如果您能够控制异步API，那么更新它会更好。如果不是这样，@Brandon的回答应该对你有所帮助。

// for search bar
search(text) {
  this.searching = true;  // shows spinner
  console.log('one');
  var text = text.toUpperCase();

  // search the text with an api call
  this.securitiesService.searchSecurities(text)
  .subscribe(data => {
    var response = data.response;
    console.log('two');

    // if no search results are present go to correct page
    if (!response.length) {
      this.router.navigate(...to route...);
      return;
    }

    console.log('three');

    // FREEZES HERE !!!
    for (var i = 0; i < response.length; i++) {
      if (text === response[i].ticker) {

        // UNFREEZES HERE !!!
        console.log('four');
        this.router.navigate(...to route...);
        this.searching = false;
        console.log('five');
        return;
      }
    }
  })
}

// for search bar
search(text) {
    this.searching = true;  // shows spinner
    console.log('one');
    var text = text.toUpperCase();

    // search the text with an api call
    this.securitiesService.searchSecurities(text)
        .subscribe(data => {
            var response = data.response;
            console.log('two');

            // if no search results are present go to correct page
            if (!response.length) {
                this.router.navigate(...to route...);
                return;
            }

            console.log('three');

            var i = 0;
            var self = this;
            var processBatch = function () {
                if (text === response[i].ticker) {
                    console.log('four');
                    self.router.navigate(...to route...);
                    self.searching = false;
                    console.log('five');
                    return;
                }
                if (++i < response.length) {
                    window.setTimeout(processBatch, 0);
                }
            };
            window.setTimeout(processBatch, 0);
        });
}