与ajax调用相同的javascript对象-我需要它两次

请你解释一下为什么这个代码不能像我想象的那样工作

我有一个带有两个列表容器的网页，一个用于打开的票证，另一个用于关闭的票证

我使用带有简单表模板的把手来注入列表容器

我定义了一个Ticket对象，并在fetchList中调用ajax来检索Ticket。代码如下：

var Ticket = {
init : function(config){
    this.config = config;
    this.setupTemplates();
},

setupTemplates: function(){
    this.config.listTemplate = Handlebars.compile( this.config.listTemplate );
},

fetchList: function(){
    self = Ticket;

    $.ajax({
        type : self.config.ajaxType,
        dataType : 'json', 
        url: self.config.ajaxUrl,
        data: self.config.ajaxData
    }).done(function(data, status, obj) {

        self.config.listContainer.empty();

        if ( data[0] ) {
            self.config.listContainer.html( self.config.listTemplate(data) );
        } else {
            self.config.listContainer.html('<p class="lead">No ticket was found.</p>');
        }
    }).fail(function(data) {
            self.config.listContainer.html('<p class="lead text-danger">Sorry! Something went wrong!!</p>');
    });
}

这段代码工作得很好，它用状态为open的表填充右侧的列表容器。哇

现在，我想对关闭的门票做同样的处理。 因此，我尝试添加以下内容：

Ticket.init({
    ajaxUrl : ajax_url,
    ajaxType : "GET",
    ajaxData : {'contact_id':contact_id, 'status':'0'},
    listTemplate: $('#tickets_list_template').html(),
    listContainer: $('.tickets_close'),
});

Ticket.fetchList();

因此，代码变成：

Ticket.init({
    ajaxUrl : ajax_url,
    ajaxType : "GET",
    ajaxData : {'contact_id':contact_id, 'status':'1'},
    listTemplate: $('#tickets_list_template').html(),
    listContainer: $('.tickets_open'),
});

Ticket.fetchList();

Ticket.init({
    ajaxUrl : ajax_url,
    ajaxType : "GET",
    ajaxData : {'contact_id':contact_id, 'status':'0'},
    listTemplate: $('#tickets_list_template').html(),
    listContainer: $('.tickets_close'),
});

Ticket.fetchList();

正如您所看到的，惟一需要更改的是ajax请求（status=0）和列表容器（.tickets\u close）的数据

现在，.tickets\u open为空，.ticket\u close返回右侧，同时返回已关闭的tickets

我认为第二个ajax调用在第一个调用之前返回，并且在第一个fetchList完成之前我已经更改了容器

所以我试着声明两个变量，如下所示：

var ticketOpened = Ticket;
var ticketClosed = Ticket;

ticketOpened.init({
    ajaxUrl : "<?=base_url('ajax/tickets/get_tickets')?>",
    ajaxType : "GET",
    ajaxData : {'contact_id':contact_id, 'status':'1'},
    listTemplate: $('#tickets_list_template').html(),
    listContainer: $('.tickets_open'),
});

ticketOpened.fetchList();

ticketClosed.init({
    ajaxUrl : "<?=base_url('ajax/tickets/get_tickets')?>",
    ajaxType : "GET",
    ajaxData : {'contact_id':contact_id, 'status':'0'},
    listTemplate: $('#tickets_list_template').html(),
    listContainer: $('.tickets_close'),
});

ticketClosed.fetchList();

var ticketoped=票据；
var ticketClosed=票据；
ticketepended.init({
ajaxUrl:“”，
ajaxType：“获取”，
ajaxData:{'contact_id'：contact_id，'status'：'1'}，
listTemplate:$（“#票证列表_模板”）.html（），
listContainer:$（'.tickets_open'），
});
ticketOpened.fetchList（）；
ticketClosed.init({
ajaxUrl:“”，
ajaxType：“获取”，
ajaxData:{'contact_id'：contact_id，'status'：'0'}，
listTemplate:$（“#票证列表_模板”）.html（），
listContainer:$（'.tickets_close'），
});
ticketClosed.fetchList（）；

但是。。。。没有什么变化。只有关闭的票是正确的，并且。打开的票是空白的。为什么?

我仍在学习javascript代码的概念，但我无法理解它

---

谢谢您的帮助。

由于

票证

是有状态的，您将需要两个对象。我建议研究构造函数。因为Ajax是异步的，所以fetchList不会等待Ajax请求完成。它立即返回，您将使用第二个

init

调用覆盖配置。这里有数百个关于Ajax的问题，看看吧，我知道Ajax需要关注，我知道异步的问题。。。但我认为我这里的问题更多的是javascript中对象的正确使用。我希望重用代码，但这可能不是正确的方法。我可以解决在ajax完成后创建触发器的问题，并在调用第二个init之前等待触发器。。。我想知道对于干净且可重用的代码来说，这是否是正确的方法。在fetchlist（）中，放置一个console.log语句，以查看是否对这两个Tickets对象都调用了它。我认为可能会有不同的问题。如果看不到fetchlist（）的更多代码，可能很难理解。还有控制台错误吗？您也尝试过var ticket1=new Ticket（）；var ticket2=new Ticket（）？控制台中没有错误，是的，我在fetchList（）中放了很多console.log。看起来不错。例如如果我在每个容器中放入一些html代码，fetchList将发布第一个容器和第二个容器的内容（这两个容器是不同的）。因此，有了chrome开发工具，我看到了带有正确参数的2个ajax调用。我已尝试使用new Ticket（），但返回错误。我认为这应该会有所帮助，您的每个票证都需要不同的实例，因此当您更改属性时，它不会影响另一个：因为

Ticket

是有状态的，您将需要两个对象。我建议研究构造函数。因为Ajax是异步的，所以fetchList不会等待Ajax请求完成。它立即返回，您将使用第二个

init

调用覆盖配置。这里有数百个关于Ajax的问题，看看吧，我知道Ajax需要关注，我知道异步的问题。。。但我认为我这里的问题更多的是javascript中对象的正确使用。我希望重用代码，但这可能不是正确的方法。我可以解决在ajax完成后创建触发器的问题，并在调用第二个init之前等待触发器。。。我想知道对于干净且可重用的代码来说，这是否是正确的方法。在fetchlist（）中，放置一个console.log语句，以查看是否对这两个Tickets对象都调用了它。我认为可能会有不同的问题。如果看不到fetchlist（）的更多代码，可能很难理解。还有控制台错误吗？您也尝试过var ticket1=new Ticket（）；var ticket2=new Ticket（）？控制台中没有错误，是的，我在fetchList（）中放了很多console.log。看起来不错。例如如果我在每个容器中放入一些html代码，fetchList将发布第一个容器和第二个容器的内容（这两个容器是不同的）。因此，有了chrome开发工具，我看到了带有正确参数的2个ajax调用。我已尝试使用new Ticket（），但返回错误。我认为这应该会有所帮助，您的每个票证都需要不同的实例，因此当您更改属性时，不会影响其他票证：

var ticketOpened = Ticket;
var ticketClosed = Ticket;

ticketOpened.init({
    ajaxUrl : "<?=base_url('ajax/tickets/get_tickets')?>",
    ajaxType : "GET",
    ajaxData : {'contact_id':contact_id, 'status':'1'},
    listTemplate: $('#tickets_list_template').html(),
    listContainer: $('.tickets_open'),
});

ticketOpened.fetchList();

ticketClosed.init({
    ajaxUrl : "<?=base_url('ajax/tickets/get_tickets')?>",
    ajaxType : "GET",
    ajaxData : {'contact_id':contact_id, 'status':'0'},
    listTemplate: $('#tickets_list_template').html(),
    listContainer: $('.tickets_close'),
});

ticketClosed.fetchList();