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，而是将其置于条件新的间隔中，该间隔将无限期地在点击时运行，直到生成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);
});

setInterval快速点击堆栈

1 个答案: