javascript - JQVMap - Ajax 悬停调用，标签问题

Question

我正在使用 JQVMap 来显示国家/地区。

如果国家/地区悬停，它会通过 ajax 显示计数，这是正确的。

问题是当我快速悬停许多国家时，它会附加到我停下来的一个标签中，所以基本上它会“堆叠”标签。

例子:

我一次悬停了太多国家。例如，我在意大利停留，所有“学校计数”都将附加到那里。

这是我的JS代码

$(document).ready(function(){
jQuery('#vmap').vectorMap({
    map: 'world_en',
    backgroundColor: null,
    color: '#ffffff',
    hoverOpacity: 0.7,
    selectedColor: '#666666',
    enableZoom: true,
    showTooltip: true,
    values: sample_data,
    scaleColors: ['#C8EEFF', '#006491'],
    normalizeFunction: 'polynomial', 
    onLabelShow: function (event, label, code) {

        if(sample_data[code] > 0) {
            //console.log(code);
            $.getJSON('/ajax/admin/ajaxcallpage', {country_key: code}, function(data) {
                //var school_count = 0;
                school_count = data;
                label.append(': ' + school_count + ' Schools'); 

            });
        }
    }
});
});

Answer 1

这个问题是因为所有的 AJAX 请求仍然被触发，一旦它们完成，所有的结果都被添加到标签中。您可以通过在 $.getJSON 返回的 jqXHR 上调用 abort() 来取消之前的请求。试试这个:

var lastRequest; // variable to store the previous request

jQuery('#vmap').vectorMap({
    map: 'world_en',
    backgroundColor: null,
    color: '#ffffff',
    hoverOpacity: 0.7,
    selectedColor: '#666666',
    enableZoom: true,
    showTooltip: true,
    values: sample_data,
    scaleColors: ['#C8EEFF', '#006491'],
    normalizeFunction: 'polynomial', 
    onLabelShow: function (event, label, code) {
        if (sample_data[code] > 0) {
            lastRequest && lastRequest.abort(); // abort the previous request

            lastRequest = $.getJSON('/ajax/admin/ajaxcallpage', {
                country_key: code
            }, function(data) {
                school_count = data;
                label.append(': ' + school_count + ' Schools'); 
            });
        }
    }
});