如何控制回主函數 - jQuery，JS

我正在編寫API調用網站的代碼作爲練習。我寫了一個函數來獲取數據，另一個函數將文章片段呈現給頁面。我的意圖是能夠清除頁面以顯示完整的文章內容。如何控制回主函數 - jQuery，JS

我正在使用jQuery函數來實現。我的問題是，在調用渲染文章片段的函數之後，我無法調用$(document).ready()部件中的任何其他函數（因爲控件似乎仍在renderSnippet函數中）。

我想能夠從$(document).ready()調用News.clearView但它不會發生。但是，如果我從renderSnippet函數內部調用它，它就可以工作。

所以我的問題是：如何在撥打renderSnippet後返回$(document).ready()部分？我試着用return陳述進行試驗，但這沒有幫助。

apiquery.js

var News = { 
    get: function(query, callback) {   
      $.ajax({ 
      url: "http://content.guardianapis.com/search", 
      type: "GET", 
      data: query, 
      dataType: "json", 
      success: function(json) { 
       callback(json.response.results);  
      }, 
      error: function(xhr, status, errorThrown) { 
       alert("Sorry, there was a problem!"); 
       console.log("Error: " + errorThrown); 
       console.log("Status: " + status); 
       console.dir(xhr); 
      }, 

     }); 
    }, 
    renderSnippet: function(quantity, query) { 
     News.get(query, function(data) { 
     $.get("views/home.html", function(contents) { 
      // renders snippets to home page 
      for(var i = 0; i < quantity; i++) { 
       var helper = contents; 
       helper = helper.replace("${Title}", data[i].webTitle); 
       helper = helper.replace("${Snippet}", data[i].fields.standfirst); 
       $('div.news').append(helper); 
      } 
      //News.clearView(); // This one works 
     }, 'html'); 

     }); 
    }, 
    clearView: function() { 
     $('div.news').empty(); 
    } 
} 


$(document).ready(function() { 
    News.renderSnippet(10, "q=technology&show-fields=all&api-key=test"); 
    News.clearView(); // This is not working 
});

謝謝！

來源

2015-10-04 Patrick

AJAX是異步的。 'clearview（）'將在'renderSnippet'之前完成。你爲什麼試圖清空你試圖填充的元素？目標不明確 – charlietfl

您可以像使用get函數一樣使用回調方法。

renderSnippet: function(quantity, query,callback) { 
    News.get(query, function(data) { 
    $.get("views/home.html", function(contents) { 
     // renders snippets to home page 
     for(var i = 0; i < quantity; i++) { 
      var helper = contents; 
      helper = helper.replace("${Title}", data[i].webTitle); 
      helper = helper.replace("${Snippet}", data[i].fields.standfirst); 
      $('div.news').append(helper); 
     } 
     //News.clearView(); // This one works 
     calllback(); 
    }, 'html'); 

    }); 
},

而且在文件中準備好，你可以撥打電話這樣

News.renderSnippet(10, "q=technology&show-fields=all&api-key=test",function(){ 
    News.clearView(); 
});

來源

2015-10-04 15:35:35 Paras

這是因爲$.get是異步函數。所以，當你撥打News.renderSnippet時，它會立即執行$.get，並且在你回傳給$.get的回調被執行之前，你的News.clearView方法已經被執行了。

你必須改變你的News.renderSnippet收到一個回調函數，然後調用它像這樣：

renderSnippet: function(quantity, query, cb) { 
    News.get(query, function(data) { 
     $.get("views/home.html", function(contents) { 
     // renders snippets to home page 
     for(var i = 0; i < quantity; i++) { 
      var helper = contents; 
      helper = helper.replace("${Title}", data[i].webTitle); 
      helper = helper.replace("${Snippet}", data[i].fields.standfirst); 
      $('div.news').append(helper); 
     } 
     cb(); 
     }, 'html'); 
    }); 
}

因此，在你$(document).ready事件，你可以這樣做：

$(document).ready(function() { 
    News.renderSnippet(10, "q=technology&show-fields=all&api-key=test", function() { 
     News.clearView(); // This will work 
    }); 
});

來源

2015-10-04 15:37:50 Buzinas

如何控制回主函數 - jQuery，JS

回答

相關問題