使其成为构造函数

Question

我对使用javascript的变量和属性有一些疑问。我通过document.ready（）开始我的代码，并在其中进行两个jQuery ajax调用。后来我决定重用该代码并再次运行这些调用。所以我抓住了那段代码并把它放在一个函数中。它看起来像这样。

$(document)
.ready(function() {
    var _groupJson;
    var _ticketsJson;
    _groupJson = groupsAjaxCall(_groupJson);
    _ticketsJson = ticketsAjaxCall(_ticketsJson); //rest of code...

为什么_groupJson？它表示由ajax调用填充的数据数组（当ajax调用在document.ready中时，它用于返回）。我需要将那些带有参数的变量传递给其他函数，比如一个打印函数，它显示在HTML中格式正确的数据函数ajaxCall看起来有点像这样：

function groupsAjaxCall(groups){
$.ajax({
    url: '/api/groups',
    dataType: 'json',
    success: function(json) {
        // get the `groups` array
        groups = json;

        showinHTML(groups);
    },
    error: function() {...}
});
return groups; }

问题是，稍后在document.ready部分我做了一些事件处理，并且需要其他函数中_ticketsJson的内容。但是其他功能收到的_ticketsJson是未定义的＆＃39;。

所以，很明显我混淆了很多关于变量在Javascript中代表什么的概念以及我该如何做var thisVar = thatVar;

提前谢谢

编辑：由于AJAX通话延迟，我不这么认为。在AjaxCall函数内部我可以引用作为参数传递的变量并显示该信息，我甚至调用了一些正常显示的打印函数。但是在函数之外_groupsJson应该保持相同的值...我认为......但它不是。

Answer 1

使其成为构造函数

我会返回一个带有onready函数的对象，在我看来这有很好的语法：

function groupsAjaxCall(groups) {
    this.onready = function () {}; // Our onready function
    this.response = {}; // The response Variable
    var self = this; // "References" this scope and all the "this" variables

     $.ajax({
        url: '/api/groups',
        dataType: 'json',
        success: function(json) {
            self.response = json; // Sets the response
            self.onready.apply(self); // Calls the callback
            showinHTML(groups);
        },
        error: function() {/* ... */}
    });

}

然后有人可以通过致电：

来使用它

var myCall = new groupsAjaxCall(groupsVariable);
//            ^^  Notice the new

myCall.onready = function () {
    console.log(this.response); //Do something with this.response
};

添加回调：

function groupsAjaxCall(groups, callback) {
     $.ajax({
        url: '/api/groups',
        dataType: 'json',
        success: function(json) {
            callback.apply(this,arguments);
//passes all arguments to callback   ^^
            showinHTML(groups);
        },
        error: function() {/* ... */}
    });

}

groupsAjaxCall(groupsVariable, function (response) {
    console.log(response); // Do something with response
});

您不应该运行同步呼叫的主要原因是因为XHR需要时间来发送和返回。在那个时候，它会冻结JavaScript。 JavaScript在UI线程上运行，这意味着您的页面也将开始“冻结/变得非常慢”。

Answer 2

回应你的评论：

一个肯定会解决我的问题的快速问题是＆＃34;我怎样才能使ajax调用的代码重复使用。＆＃34; ...这一切都开始了，因为我假设将其移入其中＃39 ; s独立的功能可以解决问题

可重用性与AJAX代码的工作方式与使用任何其他代码的方式相同。但是，您需要了解AJAX代码的工作原理。目前您正在执行此操作：

function doSomething(someValue) {
    $.ajax({
        success: function (response) {
            someValue = response;
        }
    });
    return someValue;
}

这本质上是不正确的，如explained in great detail here。但这并不意味着您无法重复使用您的AJAX代码。它只是意味着你不能期望你的AJAX函数返回一个值，因为AJAX的设计并没有这样做。

注意$.ajax()函数本身是如何工作的。它没有返回一个值，它希望你为它提供一个回调函数。您需要做的就是继续这种模式。提供回调函数：

function doSomething(callback) {
    $.ajax({
        success: callback
    });
}

然后你可以使用回调来调用你的函数：

doSomething(function (response) {
    // do something with the response
});

相同的模式成立......当使用异步操作时，不要期望返回值。相反，回应回调。

javascript通过函数和贡献传递参数＆＃39; =＆＃39;

2 个答案:

使其成为构造函数

添加回调：