且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

在函数内调用函数(Javascript)

更新时间:2022-12-16 10:28:35

我想我明白了.您已将Google API设置为在加载完成后调用onApiLoad.但是该函数在全局范围中不存在,因此会出现错误.

I think I get it. You've set up the google API to call onApiLoad when it's finished loading. But that function doesn't exist in the global scope so you'll get an error.

棘手的部分是,当您单击按钮 且Google API已完成加载时,您要运行代码.

The tricky part is that you want to run your code when you click your button and the google API has finished loading.

有两种方法可以解决此问题:

There are two ways to approach this:

1)在Google API完成加载之前,请不要渲染按钮.这涉及在您的onApiLoad函数中呈现(或显示)按钮.

1) Don't render the button until the Google API has finished loading. This involves rendering (or making visible) the button in you onApiLoad function.

由于UI/UX的原因,这可能不可行,因此有一个更复杂的解决方案:

That might not be feasible because of UI/UX stuff so there is a more complex solution:

2)为onApiLoad事件编写处理程序:

2) Write a handler for the onApiLoad event:

var gapi_loaded = false, gapi_buffered_callbacks = [];
function onApiLoad() { // this function gets called by the Google API
    gapi_loaded = true;
    // run buffered callbacks
    for (var i = 0; i < gapi_buffered_callbacks.length; i += 1) {
        gapi_buffered_callbacks();
    }
}
function addOnOnApiLoadedCallback(callback) {
    if (gapi_loaded) {
        callback(); // api is loaded, call immediately
    } else {
        gapi_buffered_callbacks.push(callback); // add to callback list
    }
}

然后在generateUpload函数内部添加:

addOnOnApiLoadedCallback(onApiLoad);


现在您可以看到,这需要大量的簿记.已经提出了使此变得更容易的想法. Promises是其中之一.如果您想探索更多,我建议您从这里开始.


Now as you can see this requires quite a bit of bookkeeping. Ideas have been developed to make this easier. Promises are one of them. If you want to explore more I suggest you start there.

这是完整的代码:

function generateUpload() 
{

   // The Browser API key obtained from the Google Developers Console.
      var developerKey = 'id';

      // The Client ID obtained from the Google Developers Console.
      var clientId = 'id';

      // Scope to use to access user's photos.
      var scope = ['https://www.googleapis.com/auth/photos'];

      var pickerApiLoaded = false;
      var oauthToken;

      // Use the API Loader script to load google.picker and gapi.auth.
      function onApiLoad() {
        gapi.load('auth', {'callback': onAuthApiLoad});
        gapi.load('picker', {'callback': onPickerApiLoad});
      }

      function onAuthApiLoad() {
        window.gapi.auth.authorize(
            {
              'client_id': clientId,
              'scope': scope,

              'immediate': true
            },
            handleAuthResult);
      }

      function onPickerApiLoad() {
        pickerApiLoaded = true;
        createPicker();
      }

      function handleAuthResult(authResult) {
        if (authResult && !authResult.error) {
          oauthToken = authResult.access_token;
          createPicker();
        }
      }

      // Create and render a Picker object for picking user Photos.
      function createPicker() {
        if (pickerApiLoaded && oauthToken) {
          var picker = new google.picker.PickerBuilder().
              enableFeature(google.picker.Feature.MULTISELECT_ENABLED).
              addView(google.picker.ViewId.PDFS).
              setOAuthToken(oauthToken).
              setDeveloperKey(developerKey).
              setCallback(pickerCallback).
              build();
          picker.setVisible(true);
        }
      }

      // A simple callback implementation.
      function pickerCallback(data) {
        var url = 'nothing';
        if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
          var doc = data[google.picker.Response.DOCUMENTS][0];
          url = doc[google.picker.Document.URL];
                 var message = 'The following(s) were stored in Parse: ' + url;
        document.getElementById('result').innerHTML = message;

        }
      }

      addOnOnApiLoadedCallback(onApiLoad); // register API load
}

var gapi_loaded = false, gapi_buffered_callbacks = [];
function onApiLoad() { // this function gets called by the Google API
    gapi_loaded = true;
    // run buffered callbacks
    for (var i = 0; i < gapi_buffered_callbacks.length; i += 1) {
        gapi_buffered_callbacks();
    }
}
function addOnOnApiLoadedCallback(callback) {
    if (gapi_loaded) {
        callback(); // api is loaded, call immediately
    } else {
        gapi_buffered_callbacks.push(callback); // add to callback list
    }
}