功能包括jQuery的AJAX不返回數據

Question

我有2個功能，其經由jQuery的AJAX方法獲取數據。

這兩個看起來都一樣，除了URL。這兩個請求都成功，並顯示在控制檯中的數據，但只有一個通過父函數返回的數據。

saveLoc取，說「OK」數據，以及「OK」，如果是印在父代碼來安慰返回。 getLoc獲取數字，例如「17」。數被打印從函數內到控制檯，但在父代碼中，變量（savedLoc）簡單地返回未定義

任何意見？我錯過了什麼嗎？

function saveLoc(story,chapter,loc) { 
 
\t jQuery.ajax({ 
 
\t \t \t \t \t \t type: "GET", 
 
\t \t \t \t \t \t url: "index.php?action=saveloc&story="+story+"&chapter="+chapter+"&loc="+loc, 
 
\t \t \t \t \t \t data: "", 
 
\t \t \t \t \t \t cache: false, 
 
\t \t \t \t \t \t success: function (data2) { 
 
\t \t \t \t \t \t \t \t console.log("Location saved: "+loc); 
 
\t \t \t \t \t \t \t \t return data2; 
 
\t \t \t \t \t \t } 
 
\t \t \t \t }); 
 
} 
 

 

 
function getLoc(story,chapter) { 
 
\t jQuery.ajax({ 
 
\t \t \t \t \t \t type: "GET", 
 
\t \t \t \t \t \t url: "index.php?action=getloc&story="+story+"&chapter="+chapter, 
 
\t \t \t \t \t \t data: "", 
 
\t \t \t \t \t \t cache: false, 
 
\t \t \t \t \t \t success: function (data) { 
 
\t \t \t \t \t \t \t \t console.log("Location retrieved: "+data); 
 
\t \t \t \t \t \t \t \t return data; 
 
\t \t \t \t \t \t } 
 
\t \t \t \t }); 
 
} 
 

 
$.urlParam = function(name){ 
 
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href); 
 
    if (results==null){ 
 
     return null; 
 
    } 
 
    else{ 
 
     return decodeURI(results[1]) || 0; 
 
    } 
 
} 
 
var story = $.urlParam('story'); 
 
var chapter = $.urlParam('chapter'); 
 

 
$(document).ready(function(){ 
 
\t var start = 1; 
 
\t var savedLoc = getLoc(story,chapter); 
 
\t 
 
\t console.log("savedLoc: "+savedLoc); 
 
\t if(savedLoc > 0) { 
 
\t \t var d = $(document).height(), 
 
\t \t \t c = $(window).height(); 
 

 
\t \t var scrollPos = Math.floor((savedLoc/100) * (d - c)); 
 
\t \t window.scrollTo(0, scrollPos); 
 
\t } 
 
\t setTimeout(function() { 
 
\t \t $(window).on('scroll', function(){ 
 
\t \t \t console.log("scroll detected"); 
 
\t \t \t setTimeout(function() { 
 
\t \t \t \t var s = $(window).scrollTop(), 
 
\t \t \t \t \t d = $(document).height(), 
 
\t \t \t \t \t c = $(window).height(); 
 

 
\t \t \t \t var scrollPercent = (s/d) * 100; 
 
\t \t \t \t saveLoc(story,chapter,scrollPercent); 
 
\t \t \t },3000); 
 
\t \t }); 
 
\t },6000) 
 
});

Answer 1

阿賈克斯getLoc是一個異步任務，所以你savedLoc = getLoc();不會得到的返回值是success功能。

對於managin異步任務，如AJAX，有一些解決方案：

1. 原始和簡單的方法：如果你想獲得AJAX的返回值，你應該使用全局變量，並傳遞一個回調到AJAX功能，如getLoc，然後調用成功回調;
2. 承諾，同步管理異步任務，請參考https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise;
3. 管理與ES6提供同步方式異步任務，請參閱https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator
4. 異步等待，發電機的替代品，是指https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

和更多信息，請參閱博客，https://blog.risingstack.com/asynchronous-javascript/

function saveLoc(story,chapter,loc) { 
 
\t jQuery.ajax({ 
 
\t \t \t \t \t \t type: "GET", 
 
\t \t \t \t \t \t url: "index.php?action=saveloc&story="+story+"&chapter="+chapter+"&loc="+loc, 
 
\t \t \t \t \t \t data: "", 
 
\t \t \t \t \t \t cache: false, 
 
\t \t \t \t \t \t success: function (data2) { 
 
\t \t \t \t \t \t \t \t console.log("Location saved: "+loc); 
 
\t \t \t \t \t \t \t \t return data2; 
 
\t \t \t \t \t \t } 
 
\t \t \t \t }); 
 
} 
 

 

 
function getLoc(story,chapter, callback) { 
 
\t jQuery.ajax({ 
 
\t \t \t \t \t \t type: "GET", 
 
\t \t \t \t \t \t url: "index.php?action=getloc&story="+story+"&chapter="+chapter, 
 
\t \t \t \t \t \t data: "", 
 
\t \t \t \t \t \t cache: false, 
 
\t \t \t \t \t \t success: function (data) { 
 
\t \t \t \t \t \t \t \t console.log("Location retrieved: "+data); 
 
       savedLoc = data; 
 
\t \t \t \t \t \t \t \t callback && callback(); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t }); 
 
} 
 

 
$.urlParam = function(name){ 
 
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href); 
 
    if (results==null){ 
 
     return null; 
 
    } 
 
    else{ 
 
     return decodeURI(results[1]) || 0; 
 
    } 
 
} 
 
var savedLoc; 
 
var story = $.urlParam('story'); 
 
var chapter = $.urlParam('chapter'); 
 

 
$(document).ready(function(){ 
 
\t var start = 1; 
 
\t getLoc(story,chapter, afterLocCallback); 
 
\t 
 
\t function afterLocCallback() { 
 
    console.log("savedLoc: "+savedLoc); 
 
    if(savedLoc > 0) { 
 
     var d = $(document).height(), 
 
     c = $(window).height(); 
 

 
     var scrollPos = Math.floor((savedLoc/100) * (d - c)); 
 
     window.scrollTo(0, scrollPos); 
 
    } 
 
    setTimeout(function() { 
 
     $(window).on('scroll', function(){ 
 
     console.log("scroll detected"); 
 
     setTimeout(function() { 
 
      var s = $(window).scrollTop(), 
 
      d = $(document).height(), 
 
      c = $(window).height(); 
 

 
      var scrollPercent = (s/d) * 100; 
 
      saveLoc(story,chapter,scrollPercent); 
 
     },3000); 
 
     }); 
 
    },6000) 
 
    } 
 
});

<script 
 
    src="https://code.jquery.com/jquery-2.2.4.min.js" 
 
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" 
 
    crossorigin="anonymous"></script>

Answer 2

首先，getLoc不返回任何東西。所以在那裏輸入return聲明。

其次，$ .ajax返回jqXHR對象。你可以使用這個對象上then，done，fail方法。如果你不熟悉這些閱讀關於承諾的概念。

一旦異步調用成功，請執行then方法內的其餘操作。

function saveLoc(story,chapter,loc) { 
    //return the ajax promise here 
    return jQuery.ajax({ 
         type: "GET", 
         url: "index.php?action=saveloc&story="+story+"&chapter="+chapter+"&loc="+loc, 
         data: "", 
         cache: false, 
         success: function (data2) { 
           console.log("Location saved: "+loc); 
           return data2; 
         } 
       }); 
} 


function getLoc(story,chapter) { 
    //return the ajax promise here 
    return jQuery.ajax({ 
         type: "GET", 
         url: "index.php?action=getloc&story="+story+"&chapter="+chapter, 
         data: "", 
         cache: false, 
         success: function (data) { 
           console.log("Location retrieved: "+data); 
           return data; 
         } 
       }); 
} 

$.urlParam = function(name){ 
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href); 
    if (results==null){ 
     return null; 
    } 
    else{ 
     return decodeURI(results[1]) || 0; 
    } 
} 
var story = $.urlParam('story'); 
var chapter = $.urlParam('chapter'); 

$(document).ready(function(){ 
    var start = 1; 
    getLoc(story,chapter).then(function(data){ 
     var savedLoc = data; 
     console.log("savedLoc: "+savedLoc); 
     if(savedLoc > 0) { 
      var d = $(document).height(), 
       c = $(window).height(); 

      var scrollPos = Math.floor((savedLoc/100) * (d - c)); 
      window.scrollTo(0, scrollPos); 
     } 
     setTimeout(function() { 
      $(window).on('scroll', function(){ 
       console.log("scroll detected"); 
       setTimeout(function() { 
        var s = $(window).scrollTop(), 
         d = $(document).height(), 
         c = $(window).height(); 

        var scrollPercent = (s/d) * 100; 
        // I think you are not using the return value of this call. So not using any promise then here. 
        saveLoc(story,chapter,scrollPercent); 
       },3000); 
      }); 
     },6000) 
    }); 

});