Question

我的页面上有一个元素。当我鼠标输入元素时，调用我的休息服务，从该服务获取数据并显示包含此数据的工具提示。当鼠标离开元素工具提示时隐藏。 Everythings在Chrome，Firefox和Opera中运行良好，但在Internet Explorer中则不行。

jQuery(document).ready(function() {
    showAndHideTooltip();
});

showAndHideTooltip = function() {
    jQuery(document).on({
        mouseenter: function () {
            console.log("Enter start");
            jQuery(".tooltip").stop(
                    true, true).delay(1000).fadeIn(500);
            getData();
            console.log("Enter end");
        },
        mouseleave: function () {
            console.log("Leave start");
            jQuery(".tooltip").stop(
                    true, true).delay(1000).fadeOut(500);
            console.log("Leave end");
        }
    }, ".element");
}

getData = function() {
    jQuery.ajax({
    url : 'rest/data/',
    type : 'POST',
    dataType : 'json',
    async: false,
    success : function(data) {
        console.log("Success");
    },
    error : function(data) {
        console.log("Error: Get data");
    }
})

当我记录所有事件时，我得到以下日志：

Enter start
Success
Enter end
Leave start
Leave end

所以一切都正确，但不是在IE中。当我只有一个在Internet Explorer中输入元素时。示例日志，当我只有一个输入我的元素时：

Enter start
Success
Enter end
Leave start
Leave end
Enter start
Success
Enter end
Leave start
Leave end
Enter start
Success
Enter end
Leave start
Leave end
Enter start
Success
Enter end
Leave start
Leave end
Enter start
Success
Enter end
Leave start
Leave end
Enter start
Success
Enter end
Leave start
Leave end
Enter start
Success
Enter end

所以我在Internet Explorer中反复调用，在其他浏览器中我只得到一次调用。此外，在最后一次调用鼠标离开事件时，不执行并且工具提示不会消失。

当我在活动中删除调用休息服务时，所有浏览器中的一切都很好。

我认为问题在我的ajax请求中设置为async: false，但是当我将false更改为true时，上面的问题也会在Internet Explorer和Firefox中看到......

任何人都知道如何解决这个问题？如何在鼠标事件中正确处理对休息服务的调用？

Answer 1

jQuery throttle / debounce允许你对你的功能进行速率限制多种有用的方式。将延迟和回调传递给$ .throttle 返回一个新函数，每个延迟执行不超过一次毫秒。

删除async: false，然后使用throttle plugin

$.throttle( 250, getData);

当mouseenter到页面上的元素时调用rest服务

1 个答案: