jjzjj

javascript - innerHTML 不能被信任 : Does not always execute synchronously

coder 2024-05-09 原文

要查看实际问题，请参阅 this jsbin .单击按钮会触发 buttonHandler()，如下所示:

function buttonHandler() {
  var elm = document.getElementById("progress");
  elm.innerHTML = "thinking";
  longPrimeCalc();
}

您可能希望此代码将 div 的文本更改为“thinking”，然后运行 ​​longPrimeCalc()，这是一个需要几秒钟才能完成的算术函数。然而，事实并非如此。相反，“longPrimeCalc”先完成，然后在运行完成后将文本更新为“thinking”，就好像两行代码的顺序颠倒了一样。

看起来浏览器并没有同步运行“innerHTML”代码，而是为其创建了一个新的线程，该线程在它自己的空闲时间执行。

我的问题:

  1. 导致这种行为的幕后原因是什么？
  2. 我怎样才能让浏览器按照我期望的方式运行，即强制它在执行“longPrimeCalc()”之前更新“innerHTML”？

我在最新版本的 chrome 中对此进行了测试。

最佳答案

您的猜测不正确。 .innerHTML 更新确实同步完成(并且浏览器绝对不会创建新线程)。在您的代码完成之前，浏览器根本不会更新窗口。如果您以某种需要更新 View 的方式询问 DOM，那么浏览器将别无选择。

例如，在设置完 innerHTML 之后，添加这一行:

var sz = elm.clientHeight; // whoops that's not it; hold on ...

edit — 我可能想出一种方法来欺骗浏览器，或者这可能是不可能的；在一个单独的事件循环中启动你的长计算肯定会使其工作:

setTimeout(longPrimeCalc, 10); // not 0, at least not with Firefox!

这里的一个很好的教训是，浏览器尽量不对页面布局进行无意义的重排。如果您的代码在质数休假期间中断，然后返回并再次更新 innerHTML ，浏览器将节省一些无意义的工作。即使不是绘制更新的布局，浏览器仍然必须弄清楚 DOM 发生了什么，以便在询问元素大小和位置等问题时提供一致的答案。

关于javascript - innerHTML 不能被信任 : Does not always execute synchronously，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16776606/

synchronouslyjavascriptcodesectioninnerHTML

有关javascript - innerHTML 不能被信任 : Does not always execute synchronously的更多相关文章

  1. ruby - 为什么不能使用类IO的实例方法noecho？ - 2

    print"Enteryourpassword:"pass=STDIN.noecho(&:gets)puts"Yourpasswordis#{pass}!"输出:Enteryourpassword:input.rb:2:in`':undefinedmethod`noecho'for#>(NoMethodError) 最佳答案 一开始require'io/console'后来的Ruby1.9.3 关于ruby-为什么不能使用类IO的实例方法noecho？，我们在StackOverflow上

  2. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  3. ruby-on-rails - Ruby rand() 不能接受变量？ - 2

    我对此有点困惑。我在RoR项目中的最终目标是从我的数据库中获取单个随机配置文件。我想它应该是这样的:@profile=Profile.find_by_user_id(rand(User.count))它一直抛出错误，因为user_id0不存在，所以我把它的一部分拿出来检查发生了什么:@r=rand(User.count)每次都返回0。发生什么了？我注册了5个假用户和5个相关配置文件来测试这个。如果我将Profile.find_by_user_id(rand(User.count))重写为Profile.find_by_user_id(3)它工作得很好。User.count也在工作。所以

  4. ruby - 为什么我不能从 ruby​​ 中的选定键创建新的散列？ - 2

    这个问题困扰了我一段时间。这不是一件困难的事情，但我不知道为什么没有简单的方法来做到这一点，我敢打赌有但我没有看到。我只想取一个散列，像这样:cars={:bob=>'Pontiac',:fred=>'Chrysler',:lisa=>'Cadillac',:mary=>'Jaguar'}然后做类似的事情cars[:bob,:lisa]得到{:bob=>'Pontiac',:lisa=>'Cadillac'}我这样做了，效果很好:classHashdefpick(*keys)Hash[select{|k,v|keys.include?(k)}]endendruby-1.8.7-p249

  5. ruby-on-rails - 为什么 Rails 可以使用 `if` 作为哈希键但在 Ruby 中不能 - 2

    在纯Rubyirb中，不能输入{if:1}。该语句不会终止，因为irb认为if不是符号，而是if语句的开始。那么为什么Rails可以有before_filter接受if作为参数？该指南的代码如下:classOrderunless也会发生同样的事情。 最佳答案 这是一个irb问题，而不是Ruby。bash=>ruby-e"puts({if:1})"bash=#{:if=>1}您可以改用pry。它将正确读取输入。https://github.com/pry/pry 关于ruby-on-rai

  6. ruby - 不能将 `each` 的所有或大多数情况替换为 `map` 吗？ - 2

    Enumerable#each和Enumerable#map的区别在于返回的是接收者还是映射后的结果。回到接收者是微不足道的，你通常不需要在each之后继续一个方法链，比如each{...}.another_method(我可能没见过这样的案例。即使你想回到接收者那里，你也可以通过tap来实现)。所以我认为所有或者大部分使用Enumerable#each的情况都可以用Enumerable#map代替。我错了吗？如果我是对的，each的目的是什么？map是否比each慢？编辑:我知道当您对返回值不感兴趣时​​使用each是一种常见的做法。我对这种做法是否存在不感兴趣，但感兴趣的是，除了从

  7. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  8. ruby - 为什么我不能将一个 fixnum 除以另一个 fixnum？ - 2

    我目前正在尝试将包含数字82,000的散列counts["email"]除以包含值130万的变量total。当我运行putscounts["email"]/total时，我得到0。为什么我不能对这些进行除法？ 最佳答案 您正在执行除法，尽管不是您预期的那样。在Ruby中有许多不同的整数除法:#Integerdivision:5/4#=>1#Floatingpointdivision:5.fdiv(4)#=>1.25#Rationaldivision:5.quo(4)#=>Rational(5,4)您还可以将其中一个整数转换为Floa

  9. ruby - 在 Ruby 中，如果我们定义了一个方法调用 "c="，为什么 c = 3 不能调用它？ - 2

    例如，如果我们defc=(foo)p"hello"endc=3c=(3)并且不会打印“hello”。我知道它可以被self.c=3调用，但为什么呢？可以通过哪些其他方式调用它？ 最佳答案 c=3(和c=(3)，完全等同于它)总是被解释为局部变量赋值。你可能会说只有当方法c=没有在self上定义时，它才应该被解释为局部变量赋值，但是这有很多问题:至少MRI需要在解析时知道在给定范围内定义了哪些局部变量。但是，在解析时并不知道给定的方法是否已定义。所以ruby​​直到运行时才知道c=3是否定义了变量c或者调用了方法c=，这意味着它不会知

  10. ruby-on-rails - 为什么不能使用符号而不是字符串来访问 Rails 模型属性？ - 2

    我需要在数据库更新前后比较一些Rails(2.3.11)模型属性值，因此我首先查找我的记录并将现有属性值保存在哈希中，如下所示:id=params[:id]work_effort=WorkEffort.find(id)ancestor_rollup_fields={:scheduled_completion_date=>work_effort.scheduled_completion_date}work_effort.update_attributes(params.except(:controller,:action))#etcetera请注意，我坚持使用符号作为哈希键的“最佳实践”

随机推荐