jquery .getscript() 脚本完全加载并执行时的回调

Question

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

成功回调

一旦脚本被加载但不一定被执行，回调就会被触发。

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

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

我在 google map api 中看到过类似的情况，但在这种情况下，您可以在 ajax 脚本 url 中指定回调函数。但是一般来说有没有明显的方法可以等到ajax脚本执行后再做回调？

Answer 1

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

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

定义为getScript documentation的回调

一旦脚本被加载但不一定被执行，回调就会被触发。

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

只有在 promise 被解决时才会调用 done。在我们的例子中，当脚本成功加载并完成运行时。所以基本上在你的代码中这意味着：

$.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

$.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 3

你可以使用ajax

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

Async 为 false，因为你想加载并执行脚本，之后在成功回调中你可以调用你的函数 foo()

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

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

$.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
});

想法是您加载一个给定的脚本，该脚本将公开一些仍然不存在的变量（您的问题示例中的foo 函数），因此在getScript 加载脚本后，您检查此变量是否存在，如果不存在，则创建一个间隔，该间隔将持续检查变量是否可用，并且仅当满足此条件时，您才会解决承诺。

Answer 6

正如提到的then、done 和$.getScript 回调在脚本被加载但未执行时触发，可能是很早......间隔可能是解决这个问题的一种方法，但在我看来它似乎不是很优雅.

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

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

在我的主脚本中，我可以像这样绑定到该事件：

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

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

} );

Answer 7

恐怕该解决方案需要轮询依赖项。或者，脚本需要包装在像 AMD 这样的预定义回调中。

Answer 8

$getScript 像这样使用

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

这对我来说很好用