javascript - 同步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,然后从 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>
推荐阅读
- python - 无法使用 Python Selenium 打印文本?
- javascript - Ajax php 重新加载到 div 示例
- git - 数据版本控制:管道参数中的绝对路径和项目路径?
- javascript - 全页站点:在每个循环中通过元素 onclick 导航
- python - 如何将变量 task_ids 传递给 Airflow 中的 xcom.pull?
- c# - 在 C# 中搜索二维对象数组
- discord - 是否可以通过命令显示我的 Discord 机器人当前连接了多少个语音通道?
- html - 如何显示淡入的svg元素?
- javascript - 滚动时突出显示菜单项不起作用
- haskell - 无法匹配预期类型 [Int] Haskell