Question

我正在创建一个交互式地图。我不想进入具体细节。但想法是用户点击一年（存储在var currentyear中），然后点击一个国家（名称存储在var thenameonly中），然后使用两个vars运行以下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"
                    }
                ]
            }
        ]
    }

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

任何帮助将不胜感激！

卡尔

Answer 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

 });
}

Ajax json超时/需要更高效

1 个答案: