在 Chrome 和 IE 中的 jquery 更改事件期间编辑元素的显示？

Question

我在更改事件期间无法正确设置表单元素的样式。该事件进行了大量处理并需要几秒钟的时间来处理，所以我想在事件加载时禁用输入。

目前我正在做：

$( '#checkbox' ).on('change', function() {
    $('#textField').prop('disabled', true);
    //process some stuff
    $('#textField').prop('disabled', false);
});

这在 Firefox 中运行良好，但在 Chrome 或 IE 中似乎不起作用。在 chrome 中，即实际禁用的属性已正确更新，但文本字段的显示在整个更改功能完成之前不会更新。

有没有办法强制chrome，即在更改功能中间更新禁用输入的样式？

Answer 1

我不知道这是否真的表明你正在尝试做的事情在 IE 上有效，但这对我来说在 IE 上有效。

您能否在 setTimeout 中调用您长时间运行的函数，并回调一个重新启用您的文本框的函数？

$('#checkbox').on('change', function() {
  $('#textField').prop('disabled', true);
  setTimeout(function() {
    // long processing here.

    // re-enable textbox here.
    $('#textField').prop('disabled', false);
     // probably use something like 50ms so your function has a slight
     // delay for Chrome to be able to update the UI, but not too long
     // to stall your function.
  }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="checkbox" id="checkbox" />Check me.
</div>
<div>
  <input type="text" id="textField" value="text here" />
</div>

我还发现了这篇关于如何在运行 CPU 密集型 JavaScript 时避免阻塞 UI 线程的帖子。 https://benjaminhorn.io/code/cpu-intensive-javascript-computations-without-blocking-the-single-thread/