按钮回调函数运行每个页面加载

Question

我有一个按钮:

<span id="signinButton">
  <span
    class="g-signin"
    data-callback="onSignInCallback"
    data-clientid="CLIENT_ID"
    data-cookiepolicy="single_host_origin"
    data-requestvisibleactions="http://schemas.google.com/AddActivity"
    data-scope="https://www.googleapis.com/auth/plus.login">
  </span>
</span>

当按下时,这会运行一个函数...此时会关闭,发出一个AJAX帖子,并在控制台中打印一些文本(只是为了测试,这部分有效):

<script type="text/javascript">
var helper = (function() {
    return {
        onSignInCallback: function(data) {

            var dataString = 'access_token=' + data['access_token'];

            $.ajax({
                type: "POST",
                url: "getdetails",
                data: dataString,
                dataType: 'html',
                timeout: 0,
                statusCode: {
                    200: function(data){
                        console.log(data);
                    },
                    error: function(data){
                        console.log("There was an error");
                    }
                }
            });
        }
    };
})();   

function onSignInCallback(data) {
  helper.onSignInCallback(data);
}
</script>

但问题是,每次刷新页面而不单击按钮时,我的函数都会运行,数据通过AJAX发布,文本将打印到控制台中.

知道为什么会这样吗？我希望它(显然)所以这只有在他们点击按钮时才会发生.

我正在使用Google Plus API,代码修改自:

https://github.com/googleplus/gplus-quickstart-javascript/blob/master/index.html#L44

Answer 1

根据该指令的文档:

data-callback - 全局命名空间中的一个函数,在呈现登录按钮时调用,并在登录流完成后调用.呈现按钮时,将发生回调以检查用户是否先前已授权应用程序并应自动登录.

按照设计,回放将在呈现按钮(即页面加载)时以及单击按钮时运行.

解决方法是在第一次运行时设置全局布尔值.

<script type="text/javascript">
var first_run = true;
var helper = (function() {
    return {
        onSignInCallback: function(data) {

            var dataString = 'access_token=' + data['access_token'];

            $.ajax({
                type: "POST",
                url: "getdetails",
                data: dataString,
                dataType: 'html',
                timeout: 0,
                statusCode: {
                    200: function(data){
                        console.log(data);
                    },
                    error: function(data){
                        console.log("There was an error");
                    }
                }
            });
        }
    };
})();   

function onSignInCallback(data) {
  if(!first_run) {
      helper.onSignInCallback(data);
  }
  first_run = false;
}
</script>