看看JQuery的承诺:

http://api.jquery.com/promise/

http://api.jquery.com/jQuery.when/

http://api.jquery.com/deferred.promise/

重构代码:

    var dfd = new jQuery.Deferred();


    function callBack(data) {
       dfd.notify(data);
    }

    // do the async call.
    myAsynchronousCall(param1, callBack);

    function doSomething(data) {
     // do stuff with data...
    }

    $.when(dfd).then(doSomething);

promise的这种能力包括同步操作的两个关键特性，如下所示(or then()接受两个回调)。 当您获得结果时，调用resolve()并传递最终结果。 如果出现错误，调用reject()。

其思想是将结果通过.then()处理程序链传递。

const synchronize = (() => {
    let chain = Promise.resolve()
    return async (promise) => {
        return chain = chain.then(promise)
    }
})()

人们可能不会考虑的一件事是:如果你控制了异步函数(其他代码段依赖于它)，并且它所采用的代码路径不一定是异步的，你可以通过创建一个可选参数使它成为同步的(而不破坏其他代码段)。

目前:

async function myFunc(args_etcetc) {
    // you wrote this
    return 'stuff';
}

(async function main() {
    var result = await myFunc('argsetcetc');
    console.log('async result:' result);
})()

考虑:

function myFunc(args_etcetc, opts={}) {
    /*
        param opts :: {sync:Boolean} -- whether to return a Promise or not
    */
    var {sync=false} = opts;
    if (sync===true)
        return 'stuff';
    else
        return new Promise((RETURN,REJECT)=> {
            RETURN('stuff');
        });
}


// async code still works just like before:
(async function main() {
    var result = await myFunc('argsetcetc');
    console.log('async result:', result);
})();
// prints: 'stuff'

// new sync code works, if you specify sync mode:
(function main() {
    var result = myFunc('argsetcetc', {sync:true});
    console.log('sync result:', result);
})();
// prints: 'stuff'

当然，如果异步函数依赖于固有的异步操作(网络请求等)，这是行不通的，在这种情况下，努力是徒劳的(没有有效地等待无理由的空闲旋转)。

另外，根据传入的选项返回值或Promise也是相当难看的。

("Why would I have written an async function if it didn't use async constructs?" one might ask? Perhaps some modalities/parameters of the function require asynchronicity and others don't, and due to code duplication you wanted a monolithic block rather than separate modular chunks of code in different functions... For example perhaps the argument is either localDatabase (which doesn't require await) or remoteDatabase (which does). Then you could runtime error if you try to do {sync:true} on the remote database. Perhaps this scenario is indicative of another problem, but there you go.)

"不要告诉我我应该怎么做"正确的方式"之类的"

好的。但你真的应该用正确的方式去做……或者其他

“我需要一个具体的例子来说明如何让它成为块……不冻结用户界面。如果这样的事情在JS是可能的。”

不，如果不阻塞UI，就不可能阻塞正在运行的JavaScript。

由于缺乏信息，很难提供解决方案，但一种选择可能是让调用函数执行一些轮询来检查全局变量，然后让回调函数将数据设置为全局变量。

function doSomething() {

      // callback sets the received data to a global var
  function callBack(d) {
      window.data = d;
  }
      // start the async
  myAsynchronousCall(param1, callBack);

}

  // start the function
doSomething();

  // make sure the global is clear
window.data = null

  // start polling at an interval until the data is found at the global
var intvl = setInterval(function() {
    if (window.data) { 
        clearInterval(intvl);
        console.log(data);
    }
}, 100);

所有这些都假设您可以修改doSomething()。我不知道有没有可能。

如果它可以修改，那么我不知道为什么你不只是传递一个回调到doSomething()从另一个回调调用，但我最好在陷入麻烦之前停止。；）

哦，管他呢。你给出的例子表明它可以正确地完成，所以我将展示这个解决方案……

function doSomething( func ) {

  function callBack(d) {
    func( d );
  }

  myAsynchronousCall(param1, callBack);

}

doSomething(function(data) {
    console.log(data);
});

因为您的示例包含一个传递给异步调用的回调，正确的方法是将一个函数传递给doSomething()，以便从回调调用。

当然，如果这是回调唯一做的事情，你只需要直接传递func…

myAsynchronousCall(param1, func);

使用Node 16的工作线程实际上使这成为可能，下面的例子是主线程正在运行异步代码，而工作线程正在同步地等待它。

这并不是说它非常有用，但它至少模糊地完成了同步等待异步代码所提出的最初问题。

const {
    Worker, isMainThread, parentPort, receiveMessageOnPort
} = require('worker_threads');
if (isMainThread) {
    const worker = new Worker(__filename);
    worker.on('message', async () => {
        worker.postMessage(await doAsyncStuff());
    });
} else {
    console.log(doStuffSync());
}

function doStuffSync(){
    parentPort.postMessage({fn: 'doStuff'});
    let message;
    while (!message) {
        message = receiveMessageOnPort(parentPort)
    }
    return message;
}

function doAsyncStuff(){
    return new Promise((resolve) => setTimeout(() => resolve("A test"), 1000));
}

你也可以把它转换成回调。

function thirdPartyFoo(callback) {    
  callback("Hello World");    
}

function foo() {    
  var fooVariable;

  thirdPartyFoo(function(data) {
    fooVariable = data;
  });

  return fooVariable;
}

var temp = foo();  
console.log(temp);