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

问题描述

我有这个 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); 的行。

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

解决方法

是什么让你觉得，它没有？ 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然后采取下一个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>

croppie javascript synchronous