使用承诺仅在另一个函数在javascript中完成后调用该函数

以前调用的函数完成后，如何使用承诺调用函数

例如，我希望动态加载脚本并调用脚本中声明的函数。我没有承诺就这么做了，得到了一个未发现错误的函数。关于如何使用承诺来解决此类问题，有什么帮助吗

我的JS代码如下：

jQuery ( document ). ready ( function ()
{
    // setup option bar
    addScript ("../js/optionBar.js") ; // add script dynamically
    setupOptionBar ("WatchDog") ; // function declared in optionBar.js
} ) ;
function addScript ( url )
{
    var script = document. createElement ("script") ;
    script. src = url ;

    document. head. appendChild ( script ) ;
}

其他选项是静态地包含JS或在主JS中声明函数。但是，我想知道如何通过承诺实现这一点，因为在JS中编写代码时经常会遇到这种问题

编辑：

尽管目前的问题已经解决了，我还是得到了同样的问题。让我们用另一个例子来看一下

jQuery ( document ). ready ( function ()
{
    jQuery ( div ). css ( { "height" : "200px" } ) ; // modifying heights of 30 divs
    jQuery ("#div30"). html ( jQuery ("#div30"). css ("height") ) ; // should put 200 in #div30 but 100 appears as modification is still in progress
} ) ;

如何解决这个问题？因为，从技术上讲，我应该等待上面的语句执行

编辑2：

任务是将事件处理程序添加到以特定ID开始的所有事件中。在执行过程中，将处理程序添加到所有事件中，但对于每个处理程序，仅显示最后一个元素的描述。我的理解告诉我这是因为JS的异步特性。请帮帮我

JS小提琴：

---

感谢大家的耐心和帮助…

您可以在addScript函数中实现如下承诺：

function addScript(url){
    return new Promise((resolve, reject) => {
        var script = document.createElement("script");
        script.src = url ;
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script) ;
    });

}

addScript('script.js').then(()=>{
    console.log('script has loaded');
}).catch(e=>{
    //handle error
});

然后可以像这样调用addScript函数：

function addScript(url){
    return new Promise((resolve, reject) => {
        var script = document.createElement("script");
        script.src = url ;
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script) ;
    });

}

addScript('script.js').then(()=>{
    console.log('script has loaded');
}).catch(e=>{
    //handle error
});

---

您可以在addScript函数中实现如下承诺：

function addScript(url){
    return new Promise((resolve, reject) => {
        var script = document.createElement("script");
        script.src = url ;
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script) ;
    });

}

addScript('script.js').then(()=>{
    console.log('script has loaded');
}).catch(e=>{
    //handle error
});

然后可以像这样调用addScript函数：

function addScript(url){
    return new Promise((resolve, reject) => {
        var script = document.createElement("script");
        script.src = url ;
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script) ;
    });

}

addScript('script.js').then(()=>{
    console.log('script has loaded');
}).catch(e=>{
    //handle error
});

---

jQuery已经附带了$.getScript函数：

jQuery(document).ready(async ($) => {
    // setup option bar
    await $.getScript ("../js/optionBar.js") ; // add script dynamically
    setupOptionBar ("WatchDog") ; // function declared in optionBar.js
});

请注意，通常最好使用模块系统和类似捆绑包的网页包来管理模块，而不是依赖全局对象来管理它们

以下是一个适用于上述旧浏览器的版本：

jQuery(document).ready(function($) {
    // setup option bar
    $.getScript ("../js/optionBar.js", function() {
      setupOptionBar ("WatchDog") ; // function declared in optionBar.js
    });
});

---

jQuery已经附带了$.getScript函数：

jQuery(document).ready(async ($) => {
    // setup option bar
    await $.getScript ("../js/optionBar.js") ; // add script dynamically
    setupOptionBar ("WatchDog") ; // function declared in optionBar.js
});

请注意，通常最好使用模块系统和类似捆绑包的网页包来管理模块，而不是依赖全局对象来管理它们

以下是一个适用于上述旧浏览器的版本：

jQuery(document).ready(function($) {
    // setup option bar
    $.getScript ("../js/optionBar.js", function() {
      setupOptionBar ("WatchDog") ; // function declared in optionBar.js
    });
});

---

通过使用async和Wait，您可以大大简化基于承诺的代码。巴贝尔可以将这些文件传输到浏览器中使用

jQuery(document).ready(
  async () => {                                 // notice `async` here
    await addScript ("../js/optionBar.js");     // notice `await` here
    setupOptionBar ("WatchDog");
  });

function addScript(url)
{
  return new Promise((resolve, reject) => {
    const script = document.createElement("script");
    script.src = url ;
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild (script);
  });
}

注意ready处理程序中的代码。将async关键字添加到函数声明中，然后等待脚本加载

---

我们仍然需要对addScript函数本身使用传统的promise，因为我们正在与旧式回调代码集成，后者需要直接访问resolve和reject continuation方法。

通过使用async和Wait，您可以大大简化基于promise的代码。巴贝尔可以将这些文件传输到浏览器中使用

jQuery(document).ready(
  async () => {                                 // notice `async` here
    await addScript ("../js/optionBar.js");     // notice `await` here
    setupOptionBar ("WatchDog");
  });

function addScript(url)
{
  return new Promise((resolve, reject) => {
    const script = document.createElement("script");
    script.src = url ;
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild (script);
  });
}

注意ready处理程序中的代码。将async关键字添加到函数声明中，然后等待脚本加载

---

我们仍然需要对addScript函数本身使用传统的承诺，因为我们正在与旧式回调代码集成，这需要直接访问resolve和reject continuation方法。

我没有看到任何尝试在代码中使用承诺。。。有什么问题吗？你不需要承诺。只需等待脚本标记的onLoad事件。如果您希望函数setupOptionBar未找到且出现错误，则可以将其包装为承诺。我想知道如何解决这个问题，不使用承诺，也不使用承诺@这就是我需要帮助的，如何把这件事包装成承诺@先生void@SamagraSinghTomar他是对的。首先，在没有承诺的情况下尝试，使用常规回调方法，并学习如何等待脚本加载/执行。我没有看到在代码中使用承诺的任何尝试。。。有什么问题吗？你不需要承诺。只需等待脚本标记的onLoad事件。如果您希望函数setupOptionBar未找到且出现错误，则可以将其包装为承诺。我想知道如何解决这个问题，不使用承诺，也不使用承诺@这就是我需要帮助的，如何把这件事包装成承诺@先生void@SamagraSinghTomar他是对的。首先，在没有承诺的情况下尝试，使用常规回调方法并学习如何等待脚本加载/执行。Simplify toscript.onload=resolve。另外，不要忘记设置适当的错误处理程序。@Bergi Good callSimplify toscript.onload=resolve。另外，不要忘记设置一个适当的错误处理程序。@Bergi很好的调用