脚本完全加载并执行时，jquery .getscript（）回调

Question

来自jquery api页面 http://api.jquery.com/jQuery.getScript/

  

成功回拨

     

一旦脚本加载但未必执行，就会触发回调。

$.getScript("test.js", function() {
    foo();
});

如果foo()函数依赖于test.js，则无法成功执行。

我在谷歌地图api中看到了类似的东西但在这种情况下你可以在ajax脚本网址中指定回调函数。但总的来说有一种明显的方法可以等到执行ajax脚本来执行回调吗？

Answer 1

我知道这是一个古老的问题，但我认为包含“完成”的两个答案都没有得到其所有者的解释，实际上它们是最好的答案。

最多投票的答案要求使用“async：false”，这反过来会创建一个不是最佳的同步调用。另一方面，承诺和承诺处理程序从1.5版开始引入jquery（可能更早？）在这种情况下，我们试图异步加载脚本并等待它完成运行。

定义getScript documentation

的回调

  

一旦脚本加载但未必执行，就会触发回调。

你需要寻找的是承诺如何行动。在这种情况下，当您正在寻找异步加载的脚本时，您可以使用“then”或“done” 看看this thread，它很好地解释了差异。

只有在解决了承诺时才会调用基本上完成的操作。在我们的情况下，脚本成功加载并完成运行。所以基本上在你的代码中它意味着：

$.getScript("test.js", function() {
    foo();
});

应更改为：

$.getScript("test.js").done(function(script, textStatus) {
    console.log("finished loading and running test.js. with a status of" + textStatus);
});

Answer 2

您可以使用ajax

jQuery.ajax({
        async:false,
        type:'GET',
        url:script,
        data:null,
        success:callback,
        dataType:'script'
    });

异步是假的，因为你想加载并执行脚本，在成功回调之后你可以调用你的函数foo（）

Answer 3

$.getScript(...) + setInterval(...)为我工作：

$.getScript('https://www.google.com/recaptcha/api.js')
  .done(function() {
    var setIntervalID = setInterval(function() {
      if (window.grecaptcha) {
        clearInterval(setIntervalID);
        console.log(window.grecaptcha);
        letsWorkWithWindowDotGreptcha();
      };
    }, 300);
  });


  function letsWorkWithWindowDotGreptcha() {
    // window.greptcha is available here....
  }

定义了我们要查找的variable后（在我的情况下window.grecaptcha，我可以拨打closure function abstracted out。

祝你好运......

Answer 4

$.getScript( "ajaxFile/myjs.js" )
.done(function( s, Status ) {
    console.warn( Status );
})
.fail(function( jqxhr, settings, exception ) {
    console.warn( "Something went wrong"+exception );
});

Answer 5

我担心解决方案需要轮询依赖项。或者，脚本需要包含在像AMD这样的预定义回调中。

Answer 6

我今天遇到了同样的问题，并提出了一个基于promises和间隔计时器的解决方案：

$.getScript("test.js", function() {
    var $def = $.Deferred();
    if (typeof foo === 'undefined') { // "foo" isn't available
        var attempts = 0;
        // create an interval
        // that will check each 100ms if the "foo" function
        // was loaded
        var interval = setInterval(function() {
            if (typeof foo !== 'undefined') { // loaded
                window.clearInterval(interval);
                $def.resolve();
            }
            // after X unsuccessfull attempts, abort the operation
            else if (attempts >= 100) {
                window.clearInterval(interval);
                $def.reject('Something went wrong');
            }

            attempts++;
        }, 100);
    }
    else { // "foo" is available
        $def.resolve();
    }
    return $def.promise();
}).then(function() {
    // at this point "foo()" is definitely available.
}).fail(function() {
    // deal with the failure
});

ideia是你加载一个给定的脚本，它会暴露一些仍然不存在的变量（问题例子中的foo函数），所以在getScript加载脚本后你检查此变量是否存在，如果不是，则创建一个间隔，该间隔将持续检查变量是否可用，并且仅当满足此条件时才解析承诺。

Answer 7

如上所述，then，done和$.getScript回调在脚本加载时未执行时触发，可能是在早期……间隔可能是解决此问题的一种方法，但在我看来意见似乎不是很优雅。

我的解决方案是在异步加载的脚本中触发事件，例如：

jQuery( document ).trigger( 'loadedeventsjs' );

在我的主脚本中，我可以绑定到该事件，例如：

jQuery( document ).on( 'loadedeventsjs', function() {

    jQuery( '#mainmenu_wrapper' ).on( 'swiperight', menuout );

} );

Answer 8

$ getScript像这样使用

$.getScript( "js/jquery.raty.min.js" )
    .done(function( script, textStatus ) {
          console.log( textStatus );
         }
          });

这对我来说很好用