javascript - 同步javascript：设置输入值后如何继续脚本？

Question

我有这个 javascript：

function getImage(input)
{ 
status++;
var base64 = $('#edit').croppie('result', {
    type: 'base64',
    size: 'viewport',
    format: 'jpeg',
    }).then(function(base64){

  $('#input').val(base64); // THIS SHOULD BE SYNCHRONOUS
  status--; // THIS SHOULD ONLY RUN AFTER THE #INPUT HAS ALREADY AN ASSIGNED VALUE ON THE PREVIOUS LINE

});

}

我只需要在上一行安全完成status--;后执行该行。$('#input').val(base64);

有一些简单的解决方案吗？

Answer 1

是什么让你觉得，它没有？UI 可能尚未更新，因为 JS 在浏览器 UI 线程上运行，因此，当 JS 仍在运行时，UI 线程被阻塞，但输入在内部确​​实具有正确的值。

document.getElementById("thebutton").addEventListener("click", () => {
  var before = $("#theinput").val();
  $("#theinput").val(13);
  var after = $("#theinput").val();
  alert("ok");
  console.log(`before: '${before}'   after: '${after}'`)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="theinput">
<button id="thebutton">click me</button>

因此，如果您真的只想在 UI 更新后继续，您需要设置一个超时时间（甚至可以为零）以返回浏览器 UI 线程，该线程将更新 UI，然后从 eventloop 中获取下一个 js .

document.getElementById("thebutton").addEventListener("click", () => {
  var before = $("#theinput").val();
  $("#theinput").val(13);
  var after = $("#theinput").val();
  console.log(`before: '${before}'   after: '${after}'`)

  setTimeout(() => { alert("ok");}, 0);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="theinput">
<button id="thebutton">click me</button>