jQueryを含む関数ajaxがデータを返さない

Question

jQuery AJAXメソッドでデータを取得する2つの関数があります。

どちらもURLと同じに見えます。両方の要求は成功し、コンソールにデータを表示しますが、親関数を介してデータを返すのは1つだけです。

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

AJAX getLocは非同期タスクであるので、あなたのsavedLoc = getLoc();はそれの戻り値はsuccess機能です取得することはできません。 managin非同期タスクのために

は、AJAXのように、いくつかのソリューションがあります

1. オリジナルかつ簡単な方法：あなたはAJAXの戻り値を取得したい場合は、グローバル変数を使用して、コールバックを転送する必要がありますgetLocのようなajax関数に渡し、コールバックを成功させて呼び出します。
2. プロミスは、同期方式で非同期タスクを管理します。https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promiseを参照してください。
3. はhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator
4. 非同期を参照してくださいhttps://blog.risingstack.com/asynchronous-javascript/
   、ブログを参照してください、https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

や詳細については、を参照してください、発電機の代替を待つ、ES6で提供同期方法と非同期タスクを管理します

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の文を入れてください。

第2に、$ .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) 
    }); 

});