javascript - JavaScript 阻止的 CSS 转换

coder 2024-12-22 原文

我正在尝试在非常密集的 JavaScript 期间创建一个加载栏，其中构建并填充了一些非常繁重的 3d 数组。在用户单击按钮之前，此加载栏需要保持为空。

卡住发生无论是否我正在使用-webkit-transition(这个应用程序可以是 chrome 独有的，在我的情况下不需要跨浏览器)。

为了简单起见，我把我的酒吧建成了这样......

<div id="loader">
    <div id="thumb">
    </div>
</div>

... 然后试图在我的主 for 循环的各个阶段增加该栏:

for(i = 0; i < 5 ; i++){
    document.getElementById('thumb').style.width = i*25 + '%';
    //More Code
}

问题是在 JavaScript 完成之前一切都卡住了。我在 Stack Overflow 上发现了一个类似的问题，Using CSS animation while javascript computes ，并在评论中找到并考虑和/或尝试了以下内容:

网络 worker

不要认为它会起作用，因为我的脚本正在用包含根据 this site 的函数的对象和构造函数填充一个数组不会工作
jQuery

这不是一个选择，我不能在我的应用程序中使用外部库 - 在任何情况下，只为加载栏导入整个库似乎有点矫枉过正......
关键帧

这很有前途，我试过了，但最后它也卡住了，所以没有快乐
timeOut()s

考虑过这一点，但由于加载栏的目的是减少挫败感，增加等待时间似乎适得其反

我很乐意在这个阶段任何增加酒吧，即使它不顺利!我很确定这个问题不仅仅让我感到震惊 - 也许有人有一个有趣的解决方案？

P.S.:我将此问题作为一个新问题发布，而不是添加到引用的问题中，因为我专门寻求 JavaScript(而非 jQuery)方面的帮助，如果我可以使用转换 (! =动画)在宽度上。

最佳答案

有些人已经提到您应该使用超时。这是合适的方法，因为它会给浏览器时间“喘息”并在任务中呈现进度条。

您必须拆分代码才能异步工作。假设您目前有这样的事情:

function doAllTheWork() {
  for(var i = 0; i < reallyBigNumberOfIterations; i++) {
    processorIntensiveTask(i);
  }
}

然后你需要把它变成这样的东西:

var i = 0;
function doSomeWork() {
  var startTime = Date.now();
  while(i < reallyBigNumberOfIterations && (Date.now() - startTime) < 30) {
    processorIntensiveTask(i);
    i++;
  }

  if(i < reallyBigNumberOfIterations) {
    // Here you update the progress bar
    incrementBar(i / reallyBigNumberOfIterations);

    // Schedule a timeout to continue working on the heavy task
    setTimeout(doSomeWork, 50);
  }
  else {
    taskFinished();
  }
}

function incrementBar(fraction) {
  console.log(Math.round(fraction * 100) + ' percent done');
}

function taskFinished() { console.log('Done!'); }

doSomeWork();

注意表达式 (Date.now() - startTime) < 30 .这意味着循环将在 30 毫秒的时间内完成尽可能多的工作。您可以使这个数字更大，但是从用户的 Angular 来看，任何超过 100 毫秒(基本上每秒 10 帧)的东西都会开始感觉迟钝。

与同步版本相比，使用这种方法完成整个任务可能会花费更长的时间。然而，从用户的体验来看，指示某事正在发生总比无限期等待什么都没有要好——即使后者的等待时间更短。

关于javascript - JavaScript 阻止的 CSS 转换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13461871/

有关javascript - JavaScript 阻止的 CSS 转换的更多相关文章

ruby-on-rails - 在 Rails 中将文件大小字符串转换为等效千字节 - 2
我的目标是转换表单输入，例如“100兆字节”或“1GB”，并将其转换为我可以存储在数据库中的文件大小(以千字节为单位)。目前，我有这个:defquota_convert@regex=/([0-9]+)(.*)s/@sizes=%w{kilobytemegabytegigabyte}m=self.quota.match(@regex)if@sizes.include?m[2]eval("self.quota=#{m[1]}.#{m[2]}")endend这有效，但前提是输入是倍数(“gigabytes”，而不是“gigabyte”)并且由于使用了eval看起来疯狂不安全。所以，功能正常，
ruby - 在 Ruby 程序执行时阻止 Windows 7 PC 进入休眠状态 - 2
我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep，它会中断应用程序。否则，计算机将持续运行数周，直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗？欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数，使应用程序能够通知系统它正在使用中，从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0
ruby - 使用 ruby 将 HTML 转换为纯文本并维护结构/格式 - 2
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。最佳答案首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
ruby - 将数组的内容转换为 int - 2
我需要读入一个包含数字列表的文件。此代码读取文件并将其放入二维数组中。现在我需要获取数组中所有数字的平均值，但我需要将数组的内容更改为int。有什么想法可以将to_i方法放在哪里吗？ClassTerraindefinitializefile_name@input=IO.readlines(file_name)#readinfile@size=@input[0].to_i@land=[@size]x=1whilex 最佳答案只需将数组映射为整数:@land边注如果你想得到一条线的平均值，你可以这样做:values=@input[x]
ruby - capybara field.has_css?匹配器 - 2
我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？最佳答案通过JonasNicklas得到了答案:No
ruby - 将散列转换为嵌套散列 - 2
这道题是thisquestion的逆题.给定一个散列，每个键都有一个数组，例如{[:a,:b,:c]=>1,[:a,:b,:d]=>2,[:a,:e]=>3,[:f]=>4,}将其转换为嵌套哈希的最佳方法是什么{:a=>{:b=>{:c=>1,:d=>2},:e=>3,},:f=>4,} 最佳答案这是一个迭代的解决方案，递归的解决方案留给读者作为练习:defconvert(h={})ret={}h.eachdo|k,v|node=retk[0..-2].each{|x|node[x]||={};node=node[x]}node[
ruby-on-rails - Ruby url 到 html 链接转换 - 2
我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.
ruby-on-rails - 使用 ruby 将多个实例变量转换为散列的更好方法？ - 2
我收到格式为的回复#我需要将其转换为哈希值(针对活跃商家)。目前我正在遍历变量并执行此操作:response.instance_variables.eachdo|r|my_hash.merge!(r.to_s.delete("@").intern=>response.instance_eval(r.to_s.delete("@")))end这有效，它将生成{:first="charlie",:last=>"kelly"},但它似乎有点hacky和不稳定。有更好的方法吗？编辑:我刚刚意识到我可以使用instance_variable_get作为该等式的第二部分，但这仍然是主要问题。
css - 用 watir 检查标签类？ - 2
我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。最佳答案试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes
python ffmpeg 使用 pyav 转换一组图像到视频 - 2
2022/8/4更新支持加入水印水印必须包含透明图像，并且水印图像大小要等于原图像的大小pythonconvert_image_to_video.py-f30-mwatermark.pngim_dirout.mkv2022/6/21更新让命令行参数更加易用新的命令行使用方法pythonconvert_image_to_video.py-f30im_dirout.mkvFFMPEG命令行转换一组JPG图像到视频时，是将这组图像视为MJPG流。我需要转换一组PNG图像到视频，FFMPEG就不认了。pyav内置了ffmpeg库，不需要系统带有ffmpeg工具因此我使用ffmpeg的python包装p

javascript - JavaScript 阻止的 CSS 转换

有关javascript - JavaScript 阻止的 CSS 转换的更多相关文章

随机推荐