执行顺序与浏览器上的 tensorflow.js 和 javascript 不同步

Question

我有一个简单的 tensorflow.js 应用程序，使用 jquery 和一些基本的 javascript。

我有一个按钮，单击该按钮后，它会自行禁用并切换微调器图标以指示模型正在执行其预测。预测完成后，将恢复默认按钮。但是，从视觉上看，UI 在浏览器上的行为并非如此。

演示：https://maksimdan.github.io/endpoints/models/pokename.htm

如果我们用同步睡眠函数代替预测，它的行为符合预期。

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

$("#raw-gen-button").click(async function(){
    console.log("Generating new predictions...");

    showButtonId("#generating-button");
    await sleep(750);
    // let predictions = await predict_model(5);
    // addGeneratedNamesToUI(predictions);
    showButtonId("#generate-button");

    console.log("Finished generating new predictions...");
    // console.log(predictions);
});

Answer 1

model.predict函数是一个sync函数，也就是说await关键字对他们没有影响，可以在调用model.predict的时候去掉await关键字，然后去掉async 定义 predict_model 函数时。

predict_model函数是一个同步函数（如：let a = 1 + 1;），“它”等待操作完成然后执行下一行代码。在您的情况下，该函数将在执行时阻塞主线程（UI 线程），这意味着您无法在浏览器上单击、更新 DOM、运行动画... .

简单的思路就是让predict_model和setTimeout函数成为一个async函数，setTimeout会将“内容”推送到一个“队列”中，不会加锁你的 UI 线程：

$("#raw-gen-button").click(async function(){
    console.log("Generating new predictions...");

    showButtonId("#generating-button");
    const predictions = await new Promise((resolve) => { // wrap into a Promise to use await keyword
        setTimeout(() => {
            resolve(predict_model(5))
        }, 100);
    });
    addGeneratedNamesToUI(predictions);
    showButtonId("#generate-button");

    console.log("Finished generating new predictions...");
    console.log(predictions);
});

执行顺序与浏览器上的 tensorflow.js 和 javascript 不同步

Order of execution is not behaving sychronously with tensorflow.js and javascript on the browser

javascript

jquery

tensorflow

tensorflow.js