javascript - 与 setTimeout 和 click 发生冲突的事务

Question

我制作了一个 slider ，但是当我在完成转换之前单击链接转到每个 slider 时会发生冲突，从一侧到另一侧通常仅在我在转换后单击时才有效。

jsfiddle

jquery

var currentSlider = 0;

$('.next').click(function(e) {
    if (currentSlider != 1) {
        $('.item').each(function(index, value) {
            var currLeft = parseInt($(value).css('margin-left'));
            var newLeft = currLeft - ($(window).innerWidth());
            $(value).css('margin-left', newLeft + 'px');
        });
        currentSlider += 1;
    };
});

$('.previous').click(function(e) {
    e.preventDefault();
    if (currentSlider != -2) {
        $('.item').each(function(index, value) {
            var currLeft = parseInt($(value).css('margin-left'));
            var newLeft = currLeft + ($(window).innerWidth());
            $(value).css('margin-left', newLeft + 'px');

        });

        currentSlider -= 1;
    };
});

function bar(clickedIndex, depth) {
    if (currentSlider < clickedIndex) {
        $(".next").click();
    } else if (currentSlider > clickedIndex) {
        $(".previous").click();
    } else {
        return;
    }
    setTimeout(function() {
        bar(clickedIndex, depth + 1);
    }, 2005);
}

$("#foo > li > a").click(function(e) {
    bar($(this).data("index"), 0);
    e.preventDefault();
});

Answer 1

fiddle :http://jsfiddle.net/3vv06805/9/

以下是更改内容的详细信息:

在转换期间禁用点击

要禁用点击，我们需要某种标志。为此，我只需设置一个简单的变量:

// Transition flag
var isTransitioning = false;

在我们的点击事件中，我们检查该变量以确定是否应该发生逻辑。以下是更新后的点击逻辑:

$('.next').click(function(e) {
    if (currentSlider != 1) {
        if (transisionsSupported && !isTransitioning) {
            isTransitioning = true;
            $('.item').each(function(index, value) {
                var currLeft = parseInt($(value).css('margin-left'));
                var newLeft = currLeft - ($(window).innerWidth());
                $(value).css('margin-left', newLeft + 'px');
            });
            currentSlider += 1;
        }
    };
});

您会注意到，在我们的 if (transitionsSupported && !isTransitioning) { block 中，我们检查 !isTransitioning，或者我们是否不进行转换。您还会看到 transitionsSupported 检查，这是我添加的辅助函数。

// Helper function to determine transition support
var transitionsSupported = (function() {
        var doc = document.body || document.documentElement,
            style = doc.style,
            vendors = ['webkit', 'Webkit', 'Moz', 'Khtml', 'O', 'ms'],
            i;
        // Test for standard prop
        if (typeof style.transition === 'string') {
            return true;
        }
        // Tests for vendor specific prop
        for (i = 0; i < vendors.length; i++) {
            if (typeof style[vendors[i] + 'Transition'] === 'string') {
                return true;
            }
        }
        return false;
    }());

这是一个自执行函数，仅运行一次。

回到我们的点击事件，我们将看到我们将 isTransitioning 变量设置为 true。我们在哪里将其设置回false？在 transitionEnd 事件中!

TransitionEnd 事件

// Transition end listener, reset flag
if (transisionsSupported) {
    $('.container').on('webkitTransitionEnd oTransitionEnd otransitionend transitionend', function() {
        isTransitioning = false;
    });
}

确实就是这样!这些添加内容将阻止您在进行转换时单击下一个/上一个按钮。但是，它也会干扰 bar 功能(因为会触发点击)，因此您可能需要研究该逻辑。

希望这有帮助!