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/

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

1 个答案: