有条件地基于超时调用jquery事件

Conditionally call jquery events based on timeout

本文关键字：调用 jquery 事件 超时 于超时 有条件      更新时间：2023-09-26

我有一个屏幕，其中有许多链接和悬停在他们上，我需要显示一些信息的工具提示div。我的工具提示工作良好。但是通过测试，有一个抱怨，工具提示甚至出现在链接上悬停(当意图不看到工具提示时)，这很烦人。我的新要求是:工具提示应该是可见的，只有当用户悬停5秒(例如)。有人能告诉我怎么做吗?我读过settimeout()，但我认为这只会延迟函数调用。我需要的是中止函数调用的情况下，用户不悬停5秒。下面是我的代码:

$(document)
                .ready(
                        function() {
                            var changeTooltipPosition = function(event) {
                                var tooltipX = event.pageX - 8;
                                var tooltipY = event.pageY + 8;
                                $('div.tooltip').css({
                                    top : tooltipY,
                                    left : tooltipX
                                });
                            };
                            var showTooltip = function(event) {
                                //alert($(this).val());
                                //var hiddenProductData = $(this).closest('tr').find('input:hidden').val(), 
                                var hiddenProductData = "",
                                    tableString = "<div class='tooltip' ><table><thead></thead><tbody>";
                                var hiddenModuleType = $('#hiddenModuleType').val(),
                                    hiddenid         = $(this).closest('tr').find('.id').val(); 
                                var hiddenProductDataTokens, nameValueTokens;
                                //$.getJSON('/getToolTipInfo/'+hiddenModuleType+'/'+hiddenid, function(jsonData) {
                                if (hiddenProductData
                                                    && hiddenProductData != '') {
                                }
                                $.getJSON('getToolTipInfo/'+hiddenModuleType+'/'+hiddenid, function(jsonData) {
                                            hiddenProductData = jsonData.data;
                                            if (hiddenProductData
                                                    && hiddenProductData != '') {
                                                hiddenProductDataTokens = hiddenProductData
                                                        .split("#");
                                                if (hiddenProductDataTokens.length > 0) {
                                                    $
                                                            .each(
                                                                    hiddenProductDataTokens,
                                                                    function(index,
                                                                            value) {
                                                                        nameValueTokens = value
                                                                                .split(",");
                                                                        tableString += "<tr><td>"
                                                                                + nameValueTokens[0]
                                                                                + " : "
                                                                                + nameValueTokens[1]
                                                                                + "</td></tr>";
                                                                    });
                                                }
                                                tableString += "</tbody></table></div>";
                                            }
                                            $(tableString).appendTo('body');
                                            changeTooltipPosition(event);
                                });

                                /* $(tableString).appendTo('body');
                                changeTooltipPosition(event); */
                            };
                            var hideTooltip = function() {
                                $('div.tooltip').remove();
                            };
//I want to be able to abort the showtooltip on mouseenter in case hover is for less     than 5 seconds
                             $(".tooltipelement").bind({
                                mousemove : changeTooltipPosition,
                                mouseenter : showTooltip,
                                mouseleave : hideTooltip
                            }); 
                        });

谢谢Suvo

你真的可以把setTimeout和clearartimeout结合使用

在moseouver事件中，调用setTimeout并将其引用保存在像这样的变量中:

var show_tooltip_timeout = setTimeout(<your function>, delay);

在mouseleave，调用clearartimeout中止执行:

clearTimeout(show_tooltip_timeout).

你可以这样做:

var hoverDelayTimeout = null; // remember the timer id in this variable
$(".tooltipelement").bind({
    mousemove : changeTooltipPosition,
    mouseenter : function(event) {
        // start a timer that calls showTooltip after 5 secs and store it's ID
        hoverDelayTimeout = setTimeout(function() {
            showTooltip(event);
        }, 5000);
    },
    mouseleave : function(event) {
        // clear the current timer (will prevent the tooltip if less than 5 secs have passed)
        clearTimeout(hoverDelayTimeout);
        hideTooltip();
    }
});

注意mouseenter上嵌套的函数，这是将事件传递给showTooltip所必需的。如果您在某些时候也需要hideTooltip中的事件，您必须以相同的方式包装它。

相关文章：