草庐IT

javascript - 为响应式 UI 分割多少长时间运行的功能？

coder 2024-07-20 原文

我有一个运行时间相当长(3 到 10 秒)的函数，它在后台加载页面中不常使用的部分的数据。我的问题是每次执行的最佳运行时间和之间的延迟时间是多少，以确保页面的其余部分保持相当的交互性，但数据的加载不会因分解而过度延迟？

例如:

var i = 0;
var chunkSize = 10;
var timeout = 1;
var data; //some array

var bigFunction = function() {
    var nextStop = chunkSize + i; //find next stop
    if (nextStop > data.length) { nextStop = data.length }

    for (; i < nextStop; i++) {
       doSomethingWithData(data[i]);
    }
    if (i == data.length) { setTimeout(finalizingFunction, timeout); }
    else { setTimeout(bigFunction , timeoutLengthInMs); }     
};

bigFunction(); //start it all off

现在，我已经做了一些测试，产生大约 100 毫秒执行时间和 1 毫秒 超时 的 chunkSize 似乎产生了一个相当灵敏的 UI，但一些我见过的示例建议使用更大的 block (~300 毫秒)和更长的超时(20 到 100 毫秒)。我是否遗漏了将我的函数分成太多小块的一些危险，或者反复试验是否是确定这些数字的安全方法？

最佳答案

任何小于大约 15 毫秒的超时值都是等效的 - 浏览器将更新 DOM 等，然后执行超时。参见 this和 this获取更多信息。我倾向于使用 setTimeout(fn, 0)。

我会检查耗时而不是猜测数字，因为正如 Jason 指出的那样，客户端之间会有速度差异:

var data; // some array
var i = 0;
var MAX_ITERS = 20; // in case the system time gets set backwards, etc
var CHECK_TIME_EVERY_N_ITERS = 3; // so that we don't check elapsed time excessively
var TIMEOUT_EVERY_X_MS = 300;

var bigFunction = function () {
    var maxI = i + MAX_ITERS;
    if (maxI > data.length) { maxI = data.length }

    var nextTimeI;
    var startTime = (new Date()).getTime(); // ms since 1970
    var msElapsed;

    while (i < maxI) {
        nextTimeI = i + CHECK_TIME_EVERY_N_ITERS;
        if (nextTimeI > data.length) { nextTimeI = data.length }

        for (; i < nextTimeI; i++) {
            doSomethingWithData(data[i]);
        }

        msElapsed = (new Date()).getTime() - startTime;
        if (msElapsed > TIMEOUT_EVERY_X_MS) {
            break;
        }
    }

    if (i == data.length) {
        setTimeout(finalizingFunction, 0);
    } else {
        setTimeout(bigFunction , 0);
    }
};

bigFunction(); //start it all off

关于javascript - 为响应式 UI 分割多少长时间运行的功能？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4149631/

长时javascriptvardatasectionsettimeout

有关javascript - 为响应式 UI 分割多少长时间运行的功能？的更多相关文章

  1. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

    总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  2. ruby - i18n Assets 管理/翻译 UI - 2

    我正在使用i18n从头开始​​构建一个多语言网络应用程序，虽然我自己可以处理一大堆yml文件，但我说的语言(非常)有限，最终我想寻求外部帮助帮助。我想知道这里是否有人在使用UI插件/gem(与django上的django-rosetta不同)来处理多个翻译器，其中一些翻译器不愿意或无法处理存储库中的100多个文件，处理语言数据。谢谢&问候，安德拉斯(如果您已经在ruby​​onrails-talk上遇到了这个问题，我们深表歉意) 最佳答案 有一个rails3branchofthetolkgem在github上。您可以通过在Gemfi

  3. ruby - 如何每月在 Heroku 运行一次 Scheduler 插件？ - 2

    在选择我想要运行操作的频率时，唯一的选项是“每天”、“每小时”和“每10分钟”。谢谢!我想为我的Rails3.1应用程序运行调度程序。 最佳答案 这不是一个优雅的解决方案，但您可以安排它每天运行，并在实际开始工作之前检查日期是否为当月的第一天。 关于ruby-如何每月在Heroku运行一次Scheduler插件？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/8692687/

  4. ruby-on-rails - 如何在 ruby​​ 中使用两个参数异步运行 exe？ - 2

    exe应该在我打开页面时运行。异步进程需要运行。有什么方法可以在ruby​​中使用两个参数异步运行exe吗？我已经尝试过ruby​​命令-system()、exec()但它正在等待过程完成。我需要用参数启动exe，无需等待进程完成是否有任何ruby​​gems会支持我的问题？ 最佳答案 您可以使用Process.spawn和Process.wait2:pid=Process.spawn'your.exe','--option'#Later...pid,status=Process.wait2pid您的程序将作为解释器的子进程执行。除

  5. ruby - 无法运行 Rails 2.x 应用程序 - 2

    我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby​​:$rvmuseree-1.8.7-head我尝试运行服务器，然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r

  6. ruby - Sinatra:运行 rspec 测试时记录噪音 - 2

    Sinatra新手；我正在运行一些rspec测试，但在日志中收到了一堆不需要的噪音。如何消除日志中过多的噪音？我仔细检查了环境是否设置为:test，这意味着记录器级别应设置为WARN而不是DEBUG。spec_helper:require"./app"require"sinatra"require"rspec"require"rack/test"require"database_cleaner"require"factory_girl"set:environment,:testFactoryGirl.definition_file_paths=%w{./factories./test/

  7. ruby-on-rails - 每次我尝试部署时，我都会得到 - (gcloud.preview.app.deploy) 错误响应 : [4] DEADLINE_EXCEEDED - 2

    我是Google云的新手，我正在尝试对其进行首次部署。我的第一个部署是RubyonRails项目。我基本上是在关注thisguideinthegoogleclouddocumentation.唯一的区别是我使用的是我自己的项目，而不是他们提供的“helloworld”项目。这是我的app.yaml文件runtime:customvm:trueentrypoint:bundleexecrackup-p8080-Eproductionconfig.ruresources:cpu:0.5memory_gb:1.3disk_size_gb:10当我转到我的项目目录并运行gcloudprevie

  8. ruby-on-rails - 无法让 rspec、spork 和调试器正常运行 - 2

    GivenIamadumbprogrammerandIamusingrspecandIamusingsporkandIwanttodebug...mmm...let'ssaaay,aspecforPhone.那么，我应该把“require'ruby-debug'”行放在哪里，以便在phone_spec.rb的特定点停止处理？(我所要求的只是一个大而粗的箭头，即使是一个有挑战性的程序员也能看到:-3)我已经尝试了很多位置，除非我没有正确测试它们，否则会发生一些奇怪的事情:在spec_helper.rb中的以下位置:require'rubygems'require'spork'

  9. ruby-on-rails - Cucumber 是否只是 rspec 的包装器以帮助将测试组织成功能？ - 2

    只是想确保我理解了事情。据我目前收集到的信息，Cucumber只是一个“包装器”，或者是一种通过将事物分类为功能和步骤来组织测试的好方法，其中实际的单元测试处于步骤阶段。它允许您根据事物的工作方式组织您的测试。对吗？ 最佳答案 有点。它是一种组织测试的方式，但不仅如此。它的行为就像最初的Rails集成测试一样，但更易于使用。这里最大的好处是您的session在整个Scenario中保持透明。关于Cucumber的另一件事是您(应该)从使用您的代码的浏览器或客户端的角度进行测试。如果您愿意，您可以使用步骤来构建对象和设置状态，但通常您

  10. ruby-on-rails - before_filter 运行多个方法 - 2

    是否有可能:before_filter:authenticate_user!||:authenticate_admin! 最佳答案 before_filter:do_authenticationdefdo_authenticationauthenticate_user!||authenticate_admin!end 关于ruby-on-rails-before_filter运行多个方法，我们在StackOverflow上找到一个类似的问题： https://

随机推荐