仅在javascript中的另一个函数完成后，才使用promises调用该函数
在之前调用的函数完成后，如何使用promises调用函数？
例如，我想动态加载脚本并调用脚本中声明的函数。我在没有承诺的情况下这样做了，并得到了一个函数没有找到错误。关于如何使用promises来解决这类问题，有什么帮助吗？
我的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中声明函数。但是，我想知道如何使用promises来做到这一点，因为在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
} ) ;如何解决这样的问题呢？因为，从技术上讲，我应该等待上面的语句执行...
Edit#2:
任务是将事件处理程序添加到所有以特定ID开始的事件。在执行过程中，处理程序将添加到所有事件中，但对于每个处理程序，只显示最后一个元素的描述。据我所知，这是因为JS的异步特性。求求你帮帮我。
JS小提琴：http://jsfiddle.net/xpvt214o/707184/
jQuery ("[id^='WTM_appOptionTitle_']"). each ( function ()
{
module = jQuery ( this ). attr ("id"). replace ("WTM_appOptionTitle_" , "") ; // store name of module
jQuery ("#WTM_appOptionTitle_" + module ). hover (
function ()
{
jQuery ("#WTM_appOptionDescription_" + module ). addClass ("wtm_appoptiondescriptionshow") ; // module has the value of last module only when this statement is executed
} ,
function ()
{
jQuery ("#WTM_appOptionDescription_" + module ). removeClass ("wtm_appoptiondescriptionshow") ;
} ) ;
} ) ;感谢大家的耐心和帮助……
回答 3
Stack Overflow用户
发布于 2018-08-30 01:09:31
您可以在addScript函数中实现一个promise，如下所示：
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函数：
addScript('script.js').then(()=>{
console.log('script has loaded');
}).catch(e=>{
//handle error
});Stack Overflow用户
发布于 2018-08-30 19:43:18
jQuery已经附带了一个$.getScript函数：
jQuery(document).ready(async ($) => {
// setup option bar
await $.getScript ("../js/optionBar.js") ; // add script dynamically
setupOptionBar ("WatchDog") ; // function declared in optionBar.js
});注意:通常情况下，使用模块系统和捆绑器(如webpack)来管理模块要比依赖于全局对象更好。
下面是一个可以在上述浏览器上运行的版本：
jQuery(document).ready(function($) {
// setup option bar
$.getScript ("../js/optionBar.js", function() {
setupOptionBar ("WatchDog") ; // function declared in optionBar.js
});
});Stack Overflow用户
发布于 2018-08-30 19:47:11
通过使用async和await，您可以大大简化基于promises的代码。Babel可以将这些代码转换为在浏览器中使用。
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关键字，然后在脚本加载时使用await。
我们仍然需要对addScript函数本身使用传统的promise，因为我们正在与需要直接访问resolve和reject延续方法的旧式回调代码集成。
https://stackoverflow.com/questions/52082732
复制相似问题