Question

我制作了一个滑块但是当我点击链接转到每个滑块之后，在完成转换之前有冲突，从一侧到另一侧通常只有在转换后点击时才有效。

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

小提琴：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) {区块中注意到，我们会检查!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函数（因为触发了点击），因此您可能希望查看该逻辑。

希望这有帮助！

使用setTimeout冲突事务并单击

1 个答案: