blocks|key|948856|text|我通过使用全局函数来避免使用setTimeout：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|948857|编辑注意:我已经更新了以下助手脚本，并创建了一个更容易使用的类；在这里查看它：https://github.com/tjmehta/fbExec.js|offset|length|948858|window.fbAsyncInit+=+function()+{
++++FB.init({
++++++++//...
++++});
++++window.fbApiInit+=+true;+//init+flag
++++if(window.thisFunctionIsCalledAfterFbInit)
++++++++window.thisFunctionIsCalledAfterFbInit();
};|code-block|syntax|javascript|948859|fbEnsureInit将在FB.init之后调用它的回调|948860|function+fbEnsureInit(callback){
++if(!window.fbApiInit)+{
++++window.thisFunctionIsCalledAfterFbInit+=+callback;+//find+this+in+index.html
++}
++else{
++++callback();
++}
}|948861|fbEnsureInitAndLoginStatus将在FB.init和FB.getLoginStatus之后调用它的回调|948862|function+fbEnsureInitAndLoginStatus(callback){
++runAfterFbInit(function(){
++++FB.getLoginStatus(function(response){
++++++if+(response.status+===+'connected')+{
++++++++//+the+user+is+logged+in+and+has+authenticated+your
++++++++//+app,+and+response.authResponse+supplies
++++++++//+the+user's+ID,+a+valid+access+token,+a+signed
++++++++//+request,+and+the+time+the+access+token
++++++++//+and+signed+request+each+expire
++++++++callback();

++++++}+else+if+(response.status+===+'not_authorized')+{
++++++++//+the+user+is+logged+in+to+Facebook,
++++++++//+but+has+not+authenticated+your+app

++++++}+else+{
++++++++//+the+user+isn't+logged+in+to+Facebook.

++++++}
++++});
++});
}|948863|fbEnsureInit示例用法：|948864|(FB.login需要在FB初始化后运行)|948865|fbEnsureInit(function(){
++++FB.login(
+++++++//..enter+code+here
++++);
});|948866|fbEnsureInitAndLogin示例用法：|948867|(FB.api需要在FB.init和FB用户登录后运行。)|948868|fbEnsureInitAndLoginStatus(function(){
++++FB.api(
+++++++//..enter+code+here
++++);
});|948869|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/tjmehta/fbExec.js^0|0|13|10|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1C|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1D|8|@]|9|@$D|1E|E|1F|1|1G]]|A|$]]|$1|F|3|G|5|H|7|1H|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|1I|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|1J|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|1K|8|@]|9|@]|A|$]]|$1|Q|3|R|5|H|7|1L|8|@]|9|@]|A|$I|J]]|$1|S|3|T|5|6|7|1M|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1N|8|@]|9|@]|A|$]]|$1|W|3|X|5|H|7|1O|8|@]|9|@]|A|$I|J]]|$1|Y|3|Z|5|6|7|1P|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|12|3|13|5|H|7|1R|8|@]|9|@]|A|$I|J]]|$1|14|3|-4|5|6|7|1S|8|@]|9|@]|A|$]]]|15|$16|$5|17|18|19|A|$1A|1B]]]]

<h2>I've avoided using setTimeout by using a global function:</h2>

<p>EDIT NOTE: I've updated the following helper scripts and created a class that easier/simpler to use; check it out here ::: <a href="https://github.com/tjmehta/fbExec.js" rel="nofollow">https://github.com/tjmehta/fbExec.js</a></p>

<pre><code>window.fbAsyncInit = function() {
    FB.init({
        //...
    });
    window.fbApiInit = true; //init flag
    if(window.thisFunctionIsCalledAfterFbInit)
        window.thisFunctionIsCalledAfterFbInit();
};
</code></pre>

<p>fbEnsureInit will call it's callback after FB.init</p>

<pre><code>function fbEnsureInit(callback){
  if(!window.fbApiInit) {
    window.thisFunctionIsCalledAfterFbInit = callback; //find this in index.html
  }
  else{
    callback();
  }
}
</code></pre>

<p>fbEnsureInitAndLoginStatus will call it's callback after FB.init and after FB.getLoginStatus</p>

<pre><code>function fbEnsureInitAndLoginStatus(callback){
  runAfterFbInit(function(){
    FB.getLoginStatus(function(response){
      if (response.status === 'connected') {
        // the user is logged in and has authenticated your
        // app, and response.authResponse supplies
        // the user's ID, a valid access token, a signed
        // request, and the time the access token
        // and signed request each expire
        callback();

      } else if (response.status === 'not_authorized') {
        // the user is logged in to Facebook,
        // but has not authenticated your app

      } else {
        // the user isn't logged in to Facebook.

      }
    });
  });
}
</code></pre>

<h2>fbEnsureInit example usage:</h2>

<p>(FB.login needs to be run after FB has been initialized)</p>

<pre><code>fbEnsureInit(function(){
    FB.login(
       //..enter code here
    );
});
</code></pre>

<h2>fbEnsureInitAndLogin example usage:</h2>

<p>(FB.api needs to be run after FB.init and FB user must be logged in.)</p>

<pre><code>fbEnsureInitAndLoginStatus(function(){
    FB.api(
       //..enter code here
    );
});
</code></pre>


blocks|key|948944|text|Facebook+API监视FB._apiKey，因此您可以在调用自己的API应用程序之前进行监视，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|948945|window.fbAsyncInit+=+function()+{
++FB.init({
++++//...your+init+object
++});
++function+myUseOfFB(){
++++//...your+FB+API+calls
++};
++function+FBreadyState(){
++++if(FB._apiKey)+return+myUseOfFB();
++++setTimeout(FBreadyState,+100);+//+adjust+time+as-desired
++};
++FBreadyState();
};+|code-block|syntax|javascript|948946|我不确定这会有什么不同，但在我的例子中--因为我想确保UI已经准备好--我已经将初始化包装为jQuery的文档准备好了(上面的最后一点)：|948947|++$(document).ready(FBreadyState);|948948|还要注意的是，我没有使用async+=+true来加载Facebook的all.js，在我的例子中，这似乎有助于更可靠地登录UI和驱动功能。|948949|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>The Facebook API watches for the FB._apiKey so you can watch for this before calling your own application of the API with something like:</p>

<pre><code>window.fbAsyncInit = function() {
  FB.init({
    //...your init object
  });
  function myUseOfFB(){
    //...your FB API calls
  };
  function FBreadyState(){
    if(FB._apiKey) return myUseOfFB();
    setTimeout(FBreadyState, 100); // adjust time as-desired
  };
  FBreadyState();
}; 
</code></pre>

<p>Not sure this makes a difference but in my case--because I wanted to be sure the UI was ready--I've wrapped the initialization with jQuery's document ready (last bit above):</p>

<pre><code>  $(document).ready(FBreadyState);
</code></pre>

<p>Note too that I'm NOT using async = true to load Facebook's all.js, which in my case seems to be helping with signing into the UI and driving features more reliably.</p>


blocks|key|1163051|text|您可以订阅活动：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1163052|即)|1163053|FB.Event.subscribe('auth.login',+function(response)+{
++FB.api('/me',+function(response)+{
++++alert(response.name);
++});
});|code-block|syntax|javascript|1163054|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>You can subscribe to the event:</p>

<p>ie)</p>

<pre><code>FB.Event.subscribe('auth.login', function(response) {
  FB.api('/me', function(response) {
    alert(response.name);
  });
});
</code></pre>


blocks|key|949028|text|我不使用任何setTimeout或setInterval，而是坚持使用延迟对象(由jQuery+here实现)。在适当的时候解析队列仍然很棘手，因为init没有回调，但将结果与事件订阅相结合(正如前面有人指出的那样)，应该可以做到这一点，并且足够接近。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|949029|伪代码片段将如下所示：|949030|FB.Event.subscribe('auth.statusChange',+function(response)+{
+++if+(response.authResponse)+{
+++++++//+user+has+auth'd+your+app+and+is+logged+into+Facebook
+++}+else+{
+++++++//+user+has+not+auth'd+your+app,+or+is+not+logged+into+Facebook
+++}
+++DeferredObject.resolve();
});|code-block|syntax|javascript|949031|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/category/deferred-object/^0|1C|4|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

<p>Instead of using any setTimeout or setInterval I would stick to deferred objects (implementation by jQuery <a href="http://api.jquery.com/category/deferred-object/" rel="nofollow">here</a>). It's still tricky to resolve queue in proper moment, because init don't have callbacks but combining result with  event subscription (as someone pointed before me), should do the trick and be close enough.</p>

<p>Pseudo-snippet would look as follows:</p>

<pre><code>FB.Event.subscribe('auth.statusChange', function(response) {
   if (response.authResponse) {
       // user has auth'd your app and is logged into Facebook
   } else {
       // user has not auth'd your app, or is not logged into Facebook
   }
   DeferredObject.resolve();
});
</code></pre>


blocks|key|949077|text|这是一个解决方案，如果你使用jquery和Facebook异步延迟加载：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|949078|//+listen+to+an+Event
$(document).bind('fbInit',function(){
++++console.log('fbInit+complete;+FB+Object+is+Available');
});

//+FB+Async
window.fbAsyncInit+=+function()+{
++++FB.init({appId:+'app_id',+
+++++++++status:+true,+
+++++++++cookie:+true,
+++++++++oauth:true,
+++++++++xfbml:+true});

++++$(document).trigger('fbInit');+//+trigger+event
};|code-block|syntax|javascript|949079|entityMap|0|LINK|mutability|MUTABLE|url|/questions/tagged/jquery^0|E|6|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>Here is a solution in case you use <a href="/questions/tagged/jquery" class="post-tag" title="show questions tagged 'jquery'" rel="tag">jquery</a> and Facebook Asynchronous Lazy Loading:</p>

<pre class="lang-js prettyprint-override"><code>// listen to an Event
$(document).bind('fbInit',function(){
    console.log('fbInit complete; FB Object is Available');
});

// FB Async
window.fbAsyncInit = function() {
    FB.init({appId: 'app_id', 
         status: true, 
         cookie: true,
         oauth:true,
         xfbml: true});

    $(document).trigger('fbInit'); // trigger event
};
</code></pre>


blocks|key|949120|text|另一种检查FB是否已初始化的方法是使用以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|949121|ns.FBInitialized+=+function+()+{
++++return+typeof+(FB)+!=+'undefined'+&&+window.fbAsyncInit.hasRun;
};|code-block|syntax|javascript|949122|因此，在页面就绪事件中，您可以使用setTimeOut检查ns.FBInitialized并将事件推迟到以后的阶段。|949123|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Another way to check if FB has initialized is by using the following code:</p>

<pre><code>ns.FBInitialized = function () {
    return typeof (FB) != 'undefined' &amp;&amp; window.fbAsyncInit.hasRun;
};
</code></pre>

<p>Thus in your page ready event you could check ns.FBInitialized and defer the event to later phase by using setTimeOut.</p>


blocks|key|949200|text|虽然上面的一些解决方案有效，但我想我应该发布我们的最终解决方案-它定义了一个'+ready‘方法，它将在FB初始化并准备好运行时立即触发。与其他解决方案相比，它的优点是在FB准备好之前或之后都可以安全地调用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|949201|它的使用方法如下：|949202|f52.fb.ready(function()+{
++++//+safe+to+use+FB+here
});|code-block|syntax|javascript|949203|这是源文件(请注意，它是在'f52.fb‘命名空间中定义的)。|949204|if+(typeof(f52)+===+'undefined')+{+f52+=+{};+}
f52.fb+=+(function+()+{

++++var+fbAppId+=+f52.inputs.base.fbAppId,
++++++++fbApiInit+=+false;

++++var+awaitingReady+=+[];

++++var+notifyQ+=+function()+{
++++++++var+i+=+0,
++++++++++++l+=+awaitingReady.length;
++++++++for(i+=+0;+i+<+l;+i%2B%2B)+{
++++++++++++awaitingReady[i]();
++++++++}
++++};

++++var+ready+=+function(cb)+{
++++++++if+(fbApiInit)+{
++++++++++++cb();
++++++++}+else+{
++++++++++++awaitingReady.push(cb);
++++++++}
++++};

++++window.fbAsyncInit+=+function()+{
++++++++FB.init({
++++++++++++appId:+fbAppId,
++++++++++++xfbml:+true,
++++++++++++version:+'v2.0'
++++++++});

++++++++FB.getLoginStatus(function(response){
++++++++++++fbApiInit+=+true;
++++++++++++notifyQ();
++++++++});
++++};

++++return+{
++++++++/**
+++++++++*+Fires+callback+when+FB+is+initialized+and+ready+for+api+calls.
+++++++++*/
++++++++'ready':+ready
++++};

})();|949205|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>While some of the above solutions work, I thought I'd post our eventual solution - which defines a 'ready' method that will fire as soon as FB is initialized and ready to go. It has the advantage over other solutions that it's safe to call either before or after FB is ready.</p>

<p>It can be used like so:</p>

<pre><code>f52.fb.ready(function() {
    // safe to use FB here
});
</code></pre>

<p>Here's the source file (note that it's defined within a 'f52.fb' namespace).</p>

<pre><code>if (typeof(f52) === 'undefined') { f52 = {}; }
f52.fb = (function () {

    var fbAppId = f52.inputs.base.fbAppId,
        fbApiInit = false;

    var awaitingReady = [];

    var notifyQ = function() {
        var i = 0,
            l = awaitingReady.length;
        for(i = 0; i &lt; l; i++) {
            awaitingReady[i]();
        }
    };

    var ready = function(cb) {
        if (fbApiInit) {
            cb();
        } else {
            awaitingReady.push(cb);
        }
    };

    window.fbAsyncInit = function() {
        FB.init({
            appId: fbAppId,
            xfbml: true,
            version: 'v2.0'
        });

        FB.getLoginStatus(function(response){
            fbApiInit = true;
            notifyQ();
        });
    };

    return {
        /**
         * Fires callback when FB is initialized and ready for api calls.
         */
        'ready': ready
    };

})();
</code></pre>


blocks|key|1163374|text|有时fbAsyncInit不能工作。我不知道为什么，然后使用这个变通方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1163375|+var+interval+=+window.setInterval(function(){
++++if(typeof+FB+!=+'undefined'){
++++++++FB.init({
++++++++++++appId++++++:+'your+ID',
++++++++++++cookie+++++:+true,++//+enable+cookies+to+allow+the+server+to+access//+the+session
++++++++++++xfbml++++++:+true,++//+parse+social+plugins+on+this+page
++++++++++++version++++:+'v2.3'+//+use+version+2.3
++++++++});

++++++++FB.getLoginStatus(function(response)+{
++++++++++++statusChangeCallback(response);
++++++++});
++++++++clearInterval(interval);
++++}
},100);|code-block|syntax|javascript|1163376|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Sometimes fbAsyncInit doesnt work. I dont know why and use this workaround then:</p>

<pre><code> var interval = window.setInterval(function(){
    if(typeof FB != 'undefined'){
        FB.init({
            appId      : 'your ID',
            cookie     : true,  // enable cookies to allow the server to access// the session
            xfbml      : true,  // parse social plugins on this page
            version    : 'v2.3' // use version 2.3
        });

        FB.getLoginStatus(function(response) {
            statusChangeCallback(response);
        });
        clearInterval(interval);
    }
},100);
</code></pre>


blocks|key|1163491|text|这里有一个更简单的方法，它既不需要事件也不需要超时。然而，它确实需要jQuery。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1163492|使用jQuery.holdReady()+(docs)|offset|length|style|CODE|1163493|因此，紧跟在jQuery脚本之后，延迟ready事件。|1163494|
<script+src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
++++$.holdReady(+true+);+//+don't+fire+ready+until+told+(ie+when+FB+loaded)
</script>|code-block|syntax|javascript|1163495|然后，在你的Facebook+init函数中，释放它：|1163496|window.fbAsyncInit+=+function()+{
++++FB.init({
++++++++appId:+'11111111111111',
++++++++cookie:+true,
++++++++xfbml:+false,
++++++++version:+'v2.4'
++++});

++++//+release+the+ready+event+to+execute
++++$.holdReady(+false+);
};|1163497|然后，您可以正常使用ready事件：|1163498|$(document).ready(+myApp.init+);|1163499|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/jquery.holdready/^0|0|2|I|L|6|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@$D|16|E|17|F|G]]|9|@$D|18|E|19|1|1A]]|A|$]]|$1|H|3|I|5|6|7|1B|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|1C|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1D|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|1E|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|6|7|1F|8|@]|9|@]|A|$]]|$1|U|3|V|5|L|7|1G|8|@]|9|@]|A|$M|N]]|$1|W|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]]]

<p>Here's a simpler method, that requires neither events or timeouts. It does require jQuery, however.</p>

<p>Use <code>jQuery.holdReady()</code> <a href="http://api.jquery.com/jquery.holdready/" rel="nofollow">(docs)</a></p>

<p>So, immediately after your jQuery script, delay the ready event.</p>

<pre><code>&lt;!-- jQuery --&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
    $.holdReady( true ); // don't fire ready until told (ie when FB loaded)
&lt;/script&gt;
</code></pre>

<p>Then, in your Facebook init function, release it:</p>

<pre><code>window.fbAsyncInit = function() {
    FB.init({
        appId: '11111111111111',
        cookie: true,
        xfbml: false,
        version: 'v2.4'
    });

    // release the ready event to execute
    $.holdReady( false );
};
</code></pre>

<p>Then you can use the ready event as normal:</p>

<pre><code>$(document).ready( myApp.init );
</code></pre>


<p>The old JS SDK had a function called FB.ensureInit. The new SDK does not seem to have such function... how can I ensure that I do not make api calls until it is fully initiated?</p>

<p>I include this in the top of every page:</p>

<pre><code>&lt;div id="fb-root"&gt;&lt;/div&gt;
&lt;script&gt;
  window.fbAsyncInit = function() {
    FB.init({
      appId  : '&lt;?php echo $conf['fb']['appid']; ?&gt;',
      status : true, // check login status
      cookie : true, // enable cookies to allow the server to access the session
      xfbml  : true  // parse XFBML
    });
    FB.Canvas.setAutoResize();
  };

  (function() {
    var e = document.createElement('script');
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
  }());
&lt;/script&gt;
</code></pre>


How to detect when facebook's FB.init is complete

jQuery

旧的JS SDK有一个名为FB.ensureInit的函数。新的SDK似乎没有这样的功能……如何确保在api完全启动之前不进行api调用？我在每个页面的顶部都包含了这样的内容：<div id="fb-root"></div><script>  window.fbAsyncInit = function() {    F...

问如何检测facebook的FB.init何时完成
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何检测facebook的FB.init何时完成EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何检测facebook的FB.init何时完成
EN