2013-05-09 95 views
0

所以我有一個用於賓果遊戲的腳本。我在另一個函數中運行我的一個函數時遇到問題。這個想法是讓我的checkBingo()函數在.click()函數之外定義。在工作中有一些Ajax,所以我不確定這是否也會發揮作用。看起來像這樣:Javascript整理嵌套函數

$(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是從來沒有得到分配的返回信息。我認爲這可能是因爲查詢運行速度不夠快,所以我試圖在循環中粘貼變量,直到它獲得分配給它的東西,然後控制檯告訴我,我的checkcingo()函數在.click函數內沒有定義。我不確定這是否是我的一個愚蠢的語法錯誤,或者我所做的事情是不可能的。

有人可以驗證這確實是可能的,我可能只是要衝刷它的語法錯誤?

+0

只需使用它的url並查看你回來的內容,就可以在瀏覽器中自行運行check-bingo。 – 2013-05-09 23:10:12

+0

爲什麼有冒號':'應該有分號? – 2013-05-09 23:12:11

+0

@ Qantas94Heavy:哪裏? – Blender 2013-05-09 23:13:50

回答

3

因爲該行:

var isBingo = checkBingo(); 

...呼籲這使得異步調用,並且不返回任何東西,isBingo將是不確定的函數(checkBingo)。解決這個

一種方法是一個回調函數傳遞給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返回一個允許這個st的promise對象編碼YLE:

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

除了需要一對夫婦的冒號轉換爲分號,並添加了jQuery $在你的「#div」代碼前,其他兩個方面需要注意:

  1. 我在Ajax調用中添加了「.txt」擴展名,以防擴展名僅僅隱藏在系統中。
  2. 代碼$('#div')推測您的頁面上有一個ID設置爲「div」的元素。如果您希望所有div元素都可點擊,則只需執行$('div')即可。
+1

爲什麼'callback(data)'之前有'return'? – 2013-05-09 23:25:15

+0

因爲我沒在想。 :)當然,這沒有什麼壞處,但是我把它刪除了。 – 2013-05-09 23:32:48

+0

你已經有了我的投票權,Async對於剛剛學習JavaScript的人來說可能很奇怪。 – 2013-05-09 23:48:51