JQVMap

Question

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

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

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

示例：

我一次徘徊了太多国家。例如，我在意大利停留，所有 "school counts" 都将附加到那里。

这是我的 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'); 
            });
        }
    }
});

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

JQVMap - Ajax call on hover, issue with label

javascript

ajax

jquery