Question

我有两个通过jQuery AJAX方法获取数据的函数。

除URL外，两者看起来都相同。两个请求都成功并在控制台中显示数据，但只有一个通过父函数返回数据。

saveLoc 提取“确定”的数据，如果在父代码中打印到控制台，则会返回“确定”。 getLoc 获取数字，例如“17”。该数字从函数内打印到控制台，但在父代码中，变量（ savedLoc ）只返回 undefined

有什么建议吗？我错过了什么吗？

function saveLoc(story,chapter,loc) {
	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) {
	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;
	var savedLoc = getLoc(story,chapter);
	
	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)
});

Answer 1

ajax getLoc是一项异步任务，因此savedLoc = getLoc();无法获得其success函数的返回值。

对于managin异步任务，比如ajax，有一些解决方案：

原始和简单的方法：如果你想得到ajax的返回值，你应该使用一个全局变量，并将回调转移到ajax函数，如getLoc，然后成功调用回调; < / LI>
承诺，以同步方式管理异步任务，请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise;
使用ES6中提供的同步方式管理异步任务，请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator
async await，生成器的替代品，请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

有关详细信息，请参阅博客https://blog.risingstack.com/asynchronous-javascript/

＆＃13;

function saveLoc(story,chapter,loc) {
	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, callback) {
	jQuery.ajax({
						type: "GET",
						url: "index.php?action=getloc&story="+story+"&chapter="+chapter,
						data: "",
						cache: false,
						success: function (data) {
								console.log("Location retrieved: "+data);
                savedLoc = data;
								callback && callback();
						}
				});
}

$.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(){
	var start = 1;
	getLoc(story,chapter, afterLocCallback);
	
	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)
  }
});

＆＃13;

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

＆＃13;

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)
    });

});

函数包括jQuery ajax不返回数据

2 个答案: