Question

我们让开发人员为我们制作了一段javascript，用于在地图上制作动画标记。请参阅http://luniablue.com/clients/endowment了解它的当前状态。

我遇到的问题是翻转过于敏感，我希望在执行翻转功能之前暂停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'}});
        });
});

Answer 1

你看到的地方：

$(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 个答案: