什么是我一直得到的这个控制台警告 - 延迟长时间运行的计时器任务以提高滚动平滑度？

Question

我的应用程序是Cordova应用程序.本周我在我的控制台中看到了很多警告:

Deferred long-running timer task(s) to improve scrolling smoothness. See crbug.com/574343.

本周之前从未见过它.我确实使用了很多settimeouts,因为有些进程非常大,因此不会向用户呈现其处理过程.

// GETS MEDICINES VIA MYCLOUD
function getMedicinesFromServer() {
    // Start Process
    myProcess("Syncing Medicines", true);
    setTimeout(function () {
            var data = getAllModifiedMedicines(viewModel.MedicineCupboard());
            sendAllMedicines(data);
    }, 300);
}

这是误报还是有更好的方法.

这些愚蠢的超时的完整原因是确保用户知道他们何时点击按钮来推送他们知道的数据.

旧方式:

myProcess("Syncing Medicines", true);
var data = getAllModifiedMedicines(viewModel.MedicineCupboard());
sendAllMedicines(data);

不保证向用户呈现该过程.

Answer 1

警告告诉您,您的计时器未按时触发,因为它是一个长时间运行的回调(> 50ms)并且用户正在/即将滚动.当您的回调正在运行时,Chrome无法开始滚动页面,因此会导致"jank",用户输入无法及时处理.为了让用户体验更好,Chrome决定推迟触发该回调,直到运行它的时间不会对用户产生负面影响.

我不知道你要做什么的细节,但正确的做法是将你的一个大回调分成更小的批次并将它们分散出来,以便任何一个调用都不会明显延迟用户操作.您还可以查看使用requestIdleCallback,它仅在Chrome处于空闲状态时调用您的函数,非常适合非时间关键任务.(但是,目前仅在Chrome上支持requestIdleCallback).