快速点击时的 setInterval 堆栈

Question

我正在尝试在用户单击图像时创建通用计时器秒表效果。我正在使用 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;
        });

Answer 1

解决方案是制作另一个变量，可以更快地搜索、查找和触发秒表效果。为此，我删除了 addClass on click 功能，而是将其置于一个有条件的新间隔中，该间隔将运行无限期地点击，直到生成 fancybox 覆盖。这确保了无论实际的定时器功能如何，条件 'sniffer' 将始终按预期工作，无论点击速度或功能顺序如何；因为我不会，我可以每秒点击 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);
});

快速点击时的 setInterval 堆栈

setInterval Stacks on rapid Click

javascript

jquery

onclick

setinterval

clearinterval