setInterval快速单击时堆叠

setInterval Stacks on rapid Click

本文关键字：单击 setInterval 更新时间：2023-09-26

当用户点击图像时，我正在尝试创建一个通用的计时器秒表效果。我正在使用fancybox v2.0。目标是在点击图像并加载"缩放"图像后立即触发计时器效果。然后，当用户退出"缩放"图像视图时，计时器应该停止。最终，我只想捕捉图像处于"缩放"状态的总时间。在大多数情况下，它按预期工作，但有一个小故障可能是被迫的；如果你故意连续快速点击fancybox((图像(唯一的预期结果是触发故障(，有时setInterval((将不会清除，而且似乎会自行堆叠。结果是，间隔持续时间增加了一倍，onClick((排序以某种方式被丢弃。故障只会在"缩放"状态下发生，所以请记住快速点击的时间。

http://www.alexldixon.com/clicktimerhelp.htm

        frontImage.click(function () {              
            //$('.fancybox-overlay').addClass('Closing');
                var frontTimer = setInterval(function(f) {
                    frontVar[0] = frontVar[0] + delay;
                    frontCover.val(frontVar/100);
                    if(($('.fancybox-overlay').is(":visible") === true)  && ($('div.Closing').length > 0))
                    {
                        frontCover.css("background-color", "green");
                        $('.fancybox-overlay, .fancybox-close').click(function () { 
                            $('.fancybox-overlay').removeClass('Closing');
                            frontCover.val(frontCover.val());
                            clearInterval(frontTimer);                  
                            frontCover.css("background-color", "yellow");
                            clearInterval(fancyOverlay);
                        });
                    } else {
                            $('.fancybox-overlay').removeClass('Closing');
                            clearInterval(frontTimer);
                            clearInterval(fancyOverlay);
                            frontCover.css("background-color", "yellow");
                        } 
                }, 1000);               
                var fancyOverlay = setInterval(function(sniffOverlay) {
                        $('div.fancybox-overlay:eq(0)').addClass('Closing');
                        return frontTimer;
                    }, 50);
                return fancyOverlay;
        });

解决方案是制作另一个变量，以便更快地搜索、查找和触发秒表效果。为了做到这一点，我删除了addClass的点击功能，而是将其放在一个有条件的新间隔中，该间隔将无限期地在点击时运行，直到生成fancybox覆盖。这确保了无论实际的定时器功能如何，无论点击速度或功能顺序如何，条件"嗅探器"都将始终按预期工作；因为我没有我可以点击0毫秒每秒。。。

frontImage.click(function () {
    var frontTimer = setInterval(function(f) {
        frontVar[0] = frontVar[0] + delay;
        frontCover.val(frontVar/100);
        if(($('.fancybox-overlay').is(":visible") === true)  && ($('div.Closing').length > 0))
        {
            frontCover.css("background-color", "green");
            $('.fancybox-overlay, .fancybox-close').mouseup(function () {
                frontImage.removeClass('Closing');
                frontCover.val(frontCover.val());
                clearInterval(frontTimer);
                frontCover.css("background-color", "yellow");
            });
        } else {
                frontImage.removeClass('Closing');
                clearInterval(frontTimer);
                frontCover.css("background-color", "yellow");
            }
    }, 1000);
    var fancyOverlay = setInterval(function(sniffOverlay) {
        if($('div.fancybox-overlay:eq(0)').length === 0)
        {
            frontImage.removeClass('Closing');
            frontCover.css("background-color", "yellow");
            frontCover.val(frontCover.val());
            clearInterval(frontTimer);
        } else {                            
            frontImage.addClass('Closing');
            return frontTimer;                      
        }
    }, 0);
});