同步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

});

}

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

有什么简单的解决方法吗？

Answer 1

是什么让您认为不是？ UI 可能还没有更新，因为 JS 在浏览器 UI 线程上运行，因此，UI 线程被阻塞，而 JS 仍然是运行，但输入确实内部有正确的值。

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 更新后继续，您需要为浏览器 return 设置一个超时（甚至可以为零）UI线程，它将更新UI，然后从事件循环中获取下一个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>

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

Synchronous javascript: How to continue script after input value is set?

javascript

synchronous

croppie