Javascript 地图标记的滚动延迟

我们让一名开发人员为我们制作了一段javascript，用于为地图上的标记设置动画。请参阅以了解其当前状态

我遇到的问题是，滚动太敏感，我希望在执行滚动功能之前有一个1秒的暂停。根据我所读到的，我需要声明一个setTimeout函数，但我不清楚在哪里插入它

我尝试了我能看到的每一个地方，除了打破剧本，我没有运气。我确信这是一件愚蠢而简单的事情，但javascript不是我的重点。有人能帮我吗

代码如下：

var firstEntry = true;
var lastOn = '';

function showAllPins() {
    if ($('#communities').hasClass('theMouseIsOff')) {
        var citiesArr = [];
        $('.pin').each( function () { 
            citiesArr.push(this.id);
            $('#'+this.id).hide();
        });
        var stillHidden = citiesArr.length;
        while (stillHidden > 0) {
            var a = Math.floor(Math.random()*citiesArr.length);
            if ($('#'+citiesArr[a]).is(':hidden')) {
                $('#'+citiesArr[a]).show().delay(Math.floor(Math.random()*900)).animate({
                    opacity: 1,
                    top: '+=40',
                }, Math.floor(Math.random()*900), 'easeOutBounce');
                stillHidden--;
            }
        }
        firstEntry = true;
        $('#communities').removeClass('theMouseIsOff');
    }
}
function showPin(relid){
    lastOn = relid;
    if ($('#communities').hasClass('theMouseIsOff')) $('#communities').removeClass('theMouseIsOff');
    if (firstEntry == true) {
        $("#communities div[id!=" + relid + "].pin").animate({
            opacity: 0,
            top: '-=40',
        }, 500);
        firstEntry = false;
    } else {
        $("#communities div[id=" + relid + "].pin").animate({
            opacity: 1,
            top: '+=40',
        }, 500, 'easeOutBounce');
    }
}
function removeLastPin() {
    $('#communities').addClass('theMouseIsOff');
    $("#communities div[id=" + lastOn + "].pin").animate({
        opacity: 0,
        top: '-=40',
    }, 500);
    setTimeout('showAllPins()',600);
}

$(document).ready( function () {
    $('.pin').mouseenter( function () {
        relid = $(this).attr('rel');
        showPin(relid);
    }).mouseleave( function () { removeLastPin() });
});

$(document).ready(function() {
    $('.pin').each(function() {
         var selector = '#' + $(this).data('tooltip-id');
         Tipped.create(this, $(selector)[0], { skin: 'light', hook: { target: 'topmiddle', tooltip: 'bottomleft'}});
        });
});

您可以看到：

$(document).ready( function () {
    $('.pin').mouseenter( function () {
        relid = $(this).attr('rel');
        showPin(relid);
    }).mouseleave( function () { removeLastPin() });
});

您可以将其更改为：

$(document).ready( function () {
    $('.pin').mouseenter( function () {
        relid = $(this).attr('rel');
        setTimeout(function(){showPin(relid)}, 1000);
    }).mouseleave( function () { removeLastPin() });
});

通过将showPin函数更改为在超时后执行，该管脚应在指定的间隔后显示

更新：

如果您只希望在指定的时间间隔内未发生mouseleave时运行该函数，可以按如下方式清除mouseleave上的时间间隔：

$(document).ready(function() {
    $('.pin').mouseenter(function() {
        relid = $(this).attr('rel');
        var awaiting = setTimeout(function() {
            showPin(relid)
        }, 1000);
    }).mouseleave(function() {    
        removeLastPin();
        clearInterval(awaiting);
    });
});

---

谢谢你。我想我没有包括“功能”部分。虽然这会延迟动画，但我认为这不是我问题的解决方案。动画在悬停后播放1秒，但是如果你已经悬停了1秒，我需要播放它。当您试图滚动所需的标记，但在途中意外滚动其他标记时，这应该可以防止动画变得疯狂。我需要定时器变量吗？如何才能正确执行此操作？@lbweb请参阅更新。根据动画功能的不同，重复动画可能会遇到更多问题。但是，如果我没有看到它的实际行动，我就不能乐观！