上一次执行完成后，如何仅启动 jQuery 函数？

Question

我正在尝试自己为我的作品集构建一个全宽图像轮播/画廊。我的第一个想法是将整个图像块gallery_wrapper 移动到左侧或右侧，并带有正或负margin-left （或者你认为这是一个坏主意吗？）。 对于两个方向，都有一个按钮控件可以执行 jQuery 函数，但是如果我非常快地触发按钮，该函数将再次执行，而前一个函数尚未完成，这会导致计算错误。所以我想我可以设置一个变量，我称之为slide_executed。在正常状态下，该值将是true，但是当函数被触发时，该值被设置为false。通过一个简单的 if 语句，我可以检查 slide_executed 是否为真，然后才触发下一张幻灯片。

好吧，问题是：它不起作用。如果我单击快速按钮，幻灯片仍然会偏移。我能做什么？

...

这是我的 HTML （我看到的很多画廊都是用无序列表构建的。这实际上是比使用嵌套 div 更好的方法吗？）：

 <div id="gallery_wrapper">
 <div class="image" class="first active">
      <div class="image_content">
           <img src="http://placekitten.com/g/1000/1000" alt="Slideshow Image 2" width="100%" style="background-color: green;" />
      </div>
 </div>
 <div class="image">
      <div class="image_content" style="background-color: gray;">
           <img src="http://placekitten.com/g/1200/1000" alt="Slideshow Image 2" width="100%" />
      </div>
 </div>
 <div class="image">
      <div class="image_content">
           <img src="http://placekitten.com/g/1000/900" alt="Slideshow Image 3" width="100%" style="background-color: blue;" />
      </div>
 </div>
 <div class="image last">
      <div class="image_content">
           <img src="http://placekitten.com/g/1000/1100" alt="Slideshow Image 4" width="100%" />
      </div>
 </div>
 </div>
 <div class="overlay">
      <button class="left">Left</button>
      <button class="right">Right</button>
 </div>

这是 CSS：

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#gallery_wrapper {
    margin: 0;
    padding: 0;
    width: 400%; /* 100 x Anzahl der Slides */
    height: 100%;
    overflow: scroll;
    direction: rtl;
    vertical-align: middle;
}

.image {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 25%; /* 100 : Anzahl der Slides */
    float: left;
}

.image_content {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.image img {
    margin: 0;
    padding: 0;
    height: 100%;
    width: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
}

.overlay {
    bottom: 0px;
    position: fixed;
    background-color: green;
    font-size: 20;
    height: 50px;
    width: 100%;
    text-align: center;
    vertical-align: middle;
}

.overlay button {
    background-color: yellow;
    height: 50px;
    text-align: center;
    vertical-align: middle;
}

是的，这是我的 jQuery 解决方案：

$(document).ready(function () {

var slide_width = +$('.image_content').outerWidth();
var slide_executed = true;

var slide_right = function () {
    slide_executed = false;
    console.log(slide_executed);
    var left_indent = parseInt($('#gallery_wrapper').css('margin-left')) - slide_width;
    $('#gallery_wrapper').animate({
        'margin-left': left_indent
    }, {
        queue: false,
        duration: 500
    });
    slide_executed = true;
    console.log(slide_executed);
};

var slide_left = function () {
    slide_executed = false;
    console.log(slide_executed);
    var right_indent = parseInt($('#gallery_wrapper').css('margin-left')) + slide_width;
    $('#gallery_wrapper').animate({
        'margin-left': right_indent
    }, {
        queue: false,
        duration: 500
    });
    slide_executed = true;
    console.log(slide_executed);
};

$('.left').click(function () {
    if (slide_executed == true) {
        slide_left();
    };
});

$('.right').click(function () {
    if (slide_executed == true) {
        slide_right();
    };
});

});

这是整个事情的Fiddle……

Answer 1

这应该会禁用控件。

$('.left').click(function () {
    if (!$('#gallery_wrapper').is(':animated')) {
        slide_left();
    };
});

$('.right').click(function () {
    if (!$('#gallery_wrapper').is(':animated')) {
        slide_right();
    };
});

$().animation是非阻塞函数，所以即使动画不完整slide_executed会被设置为true