Javascript分类嵌套函数

Javascript sorting out nested functions

本文关键字：函数 嵌套 分类 Javascript      更新时间：2023-09-26

所以我有一个脚本，这是一个宾果游戏。一个函数在另一个函数中运行有问题。我们的想法是在.click()函数之外定义checkBingo()函数。有一些ajax在起作用，所以我不确定它在这里是否也起作用。看起来像:

$(document).ready(function(){
  function checkBingo() {
    $.ajax({
      url: '/check-bingo',
      type: 'GET',
      success: function(data){
        return data;
      } 
    }):
  }
  $('#div').click(function() {
    // Some stuff gets done here
    $.ajax({
      url: '/tile',
      type: 'GET',
      success: function(data){
    // Does some stuff with data, then needs to check if there's a bingo.
        var isBingo = checkBingo();
        if (isBingo == 'something') {
          // Displays something specific on the page.
        }  else {
          // Displays other things on the page.
        }
  }
  }):
});

我被挂起的地方，是isBingo从来没有被分配返回的信息。我认为这可能是因为查询运行得不够快，所以我尝试将变量固定在循环中，直到它获得分配给它的东西，然后控制台告诉我，.click函数内的checkBingo()没有定义。我不确定这是否只是我的一个愚蠢的语法错误，或者我所做的是不可能的。

有人可以验证这确实是可能的，我可能只需要搜索它的语法错误?

因为这一行:

var isBingo = checkBingo();

…正在调用一个函数(checkBingo)，该函数进行异步调用并且不返回任何东西，则isBingo将是未定义的。

一种方法是通过一个回调函数到checkBingo，因为JavaScript允许函数像数据一样被传递，当数据从服务器获得时，该函数将被jQuery调用:

function checkBingo(callback) {
  $.ajax({
    url: '/check-bingo',
    type: 'GET',
    success: function(data){
      callback(data);
    }
    // or you could just do:
    // success: callback,
  });
}
// ....
success: function(data){
    checkBingo(function (isBingo) {
        if (isBingo == 'something') {
          // Displays something specific on the page.
        }  else {
          // Displays other things on the page.
        }
    });

另一种方法，其中将允许您继续使用您的同步风格(即，在checkBingo可以返回的东西，你可以立即使用它)，即使代码不同步执行是通过利用事实，jQuery的Ajax API的后期版本返回一个承诺对象，允许这种风格的编码:

$(document).ready(function(){
    function checkBingo() {
        return $.ajax({
            url: '/check-bingo.txt',
            type: 'GET'
        });
    }
    $('#div').click(function() {
        // Some stuff gets done here
        $.ajax({
            url: '/tile.txt',
            type: 'GET',
            success: function(data){
                var checkingBingo = checkBingo();
                checkingBingo.done(function (isBingo) {
                    if (isBingo == 'something') {
                        alert('a');
                        // Displays something specific on the page.
                    }  else {
                        alert('b');
                        // Displays other things on the page.
                    }
                });
            }
        });
    });
});

除了需要将几个冒号转换为分号，并在"#div"代码前面添加jQuery $之外，还有两个方面需要注意:

  1. 我在Ajax调用中添加了"。txt"扩展名，以防扩展名仅仅隐藏在您的系统中。
  2. 代码$('#div')假定页面上有一个ID设置为"div"的元素。如果你想让所有的div元素都是可点击的，你只需要做$('div')。
相关文章：