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

Edit the display of an element during a jquery change event in Chrome and IE?

本文关键字：事件 元素 显示 Chrome IE jquery 编辑      更新时间：2023-09-26

我有问题得到表单元素的样式在一个变化事件中正确。事件做了很多处理，需要几秒钟的时间来处理，所以我想在事件加载时禁用输入。

此刻我正在做:

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

这在firefox中工作得很好，但在Chrome或IE中似乎不起作用。在chrome和ie中，实际禁用属性被正确更新，但文本字段的显示不会更新，直到整个更改功能完成。

是否有办法强迫chrome和ie在更改功能的中间更新禁用输入的样式?

我不知道这是否真的证明了你正在尝试做的事情在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>

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

相关文章：