Ajax json超时/需要更高效答案

【问题标题】：Ajax json timeout / needs to be more efficientAjax json超时/需要更高效
【发布时间】：2015-09-24 11:37:49
【问题描述】：

我正在创建一个交互式地图。具体的我就不说了。但想法是，用户点击一年（存储在 var currentyear 中），然后点击一个国家（名称存储在 var thenameonly 中），然后使用这两个 var 运行以下 ajax：

$.ajax({
    async: false,
    url: url, // JQuery loads content.json
    contentType: "application/json",
    dataType: 'json',
    timeout: 100000,

    success: (function(data) {
        alert('success');
        $.each(data[thenameonly], function() {
            $.each(this[currentyear], function() {
                if(this.pol_type == 'images/gov_icon.svg'){
                    govcount++;
                } else if(icon == 'images/stock_x_icon.svg'){
                    stockcount++;
                } 
            });
        });
    }),//SUCCESS

    complete: (function(){
        alert('complete');
        $(".gov_numb").html(govcount);
        $(".stock_numb").html(stockcount);
    }),//COMPLETE

    error: function(jqXHR, textStatus, errorThrown) {
        console.log(JSON.stringify(jqXHR));
        console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
    }//ERROR

});

它工作了一段时间，但随着用户继续点击（有时在同一年内的同一个国家，运行相同的查询）最终成功函数滞后，有时在运行前大约 5 秒。

这是超时但我增加了它，因为完整的功能在成功之前运行，这导致了其他问题。

这是json文件供参考

{
"argentina": [
            {
                "2004": [
                    {
                        "pol_type":"images/gov_icon.svg",
                        "policy":"pol info"
                    }
                ],


                "2006": [
                    {
                        "pol_type":"images/gov_icon.svg",
                        "policy":"pol info"
                    }
                ],

                "2008": [
                    {
                        "pol_type":"images/gov_icon.svg",
                        "policy":"pol info"
                    }
                ]
            }
],


"australia": [
            {
                "1998": [
                    {
                        "pol_type":"images/gov_icon.svg",
                        "policy":"pol info"
                    }
                ],                
                "2001": [
                    {
                        "pol_type":"images/gov_icon.svg",
                        "policy":"pol info"
                    }
                ],
                "2004": [
                    {
                        "pol_type":"images/stock_x_icon.svg",
                        "policy":"pol info"
                    }
                ],
                "2006": [
                    {
                        "pol_type":"images/gov_icon.svg",
                        "policy":"pol info"
                    },
                    {
                        "pol_type":"images/gov_icon.svg",
                        "policy":"pol info"
                    }
                ],

                "2007": [
                    {
                        "pol_type":"images/gov_icon.svg",
                        "policy":"pol info"
                    }
                ],

                "2010": [
                    {
                        "pol_type":"images/gov_icon.svg",
                        "policy":"pol info"
                    },
                    {
                        "pol_type":"images/gov_icon.svg",
                        "policy":"pol info"
                    },
                    {
                        "pol_type":"images/stock_x_icon.svg",
                        "policy":"pol info"
                    }
                ],

                "2011": [
                    {
                        "pol_type":"images/gov_icon.svg",
                        "policy":"pol info"
                    }
                ],

                "2013": [
                    {
                        "pol_type":"images/gov_icon.svg",
                        "policy":"pol info"
                    }
                ],

                "2014": [
                    {
                        "pol_type":"images/stock_x_icon.svg",
                        "policy":"pol info"
                    }
                ]
            }
        ]
    }

我还有更多的国家和政策等要添加，所以我担心我的结构会导致它崩溃。

任何帮助将不胜感激！

卡尔

【问题讨论】：

timeout: 100000 可能是您的问题的原因。您可能需要重新考虑您的async: false。
嗨@Andy，感谢您的回复，但正如我所说我只将超时设置为100000，因为它正在超时，我正在尝试确定它为什么这样做。添加 async:false 是我试图解决此问题的其他方法。在我运行 ajax（点击一个国家）大约 25-30 次之后，成功开始滞后，大约需要 5-10 秒来触发警报（'success'）。
url 在通话之间是否有变化？

标签： javascript jquery json ajax lag

【解决方案1】：

你需要防止重复调用 AJAX 发送，所以在你的代码中添加一个标志loading。您可以将其添加到全局范围，或在某个函数定义中关闭：

if(!loading){
 loading = true;
 $.ajax({
 async: false,
 url: url, // JQuery loads content.json
 contentType: "application/json",
 dataType: 'json',
 timeout: 100000,

 success: (function(data) {
    alert('success');
    $.each(data[thenameonly], function() {
        $.each(this[currentyear], function() {
            if(this.pol_type == 'images/gov_icon.svg'){
                govcount++;
            } else if(icon == 'images/stock_x_icon.svg'){
                stockcount++;
            } 
        });
    });
    loading = false;
 }),//SUCCESS

 complete: (function(){
    alert('complete');
    $(".gov_numb").html(govcount);
    $(".stock_numb").html(stockcount);
    loading = false;
 }),//COMPLETE

 error: function(jqXHR, textStatus, errorThrown) {
    console.log(JSON.stringify(jqXHR));
    console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
    loading = false;
 }//ERROR

 });
}

【讨论】：