如果另一个功能完成,则执行该功能,而不是何时

Execute function IF another function is complete NOT when

本文关键字:功能 何时 另一个 如果 执行      更新时间:2023-09-26

我在创建悬停时暂停的滑块时遇到了问题,因为我在鼠标关闭时再次执行动画函数,如果我在它上面快速滑动鼠标(从而多次调用该函数),它就会开始播放,我希望它只在其他函数完成时调用该函数,否则它根本不调用(以避免队列堆积和混乱的动画)

做这件事最简单/最好的方法是什么?

$(document).ready(function() {
//get variables
var slide_width      = $('.slider_container').width();
var number_of_slides = $('.slider_container .slide').length;
var slider_width = slide_width*number_of_slides;
//set element dimensions
$('.slide').width(slide_width);
$('.slider').width(slider_width);
var n = 1;
$('.slider_container').hover(function() { 
//Mouse on
    n = 0;
    $('.slider').stop(true, false);
}, function() {
//Mouse off
    n = 1;
    if (fnct == 0) sliderLoop();
});
//Called in Slide Loop
function animateSlider() {
        $('.slider').delay(3000).animate({ marginLeft: -(slide_width * i) }, function() {
            i++;
            sliderLoop();
        });

}
var i = 0;
var fnct = 0
//Called in Doc Load
function sliderLoop() {
    fnct = 1
    if(n == 1) {
        if (i < number_of_slides) {
            animateSlider();
        }
        else
        {
            i = 0;
            sliderLoop();
        }
    }
    fnct = 0
}
sliderLoop();

});

滑块工作正常,但如果我快速移动鼠标,滑块就会开始快速来回摆动。。。几个小时以来,我一直在想办法解决这个问题。。

以下是修复它的方法,效果很好!

$(document).ready(function() {
//get variables
var slide_width = $('.slider_container').width();
var number_of_slides = $('.slider_container .slide').length;
var slider_width = slide_width*number_of_slides;
//set element dimensions
$('.slide').width(slide_width);
$('.slider').width(slider_width);
var n = 1;
var t = 0;
$('.slider_container').hover(function() { 
    clearInterval(t);
    }, function() {
    t = setInterval(sliderLoop,3000);
});
var marginSize = i = 1;
var fnctcmp = 0;

//Called in Doc Load
function sliderLoop() {
if (i < number_of_slides) {
marginSize = -(slide_width * i++);
}
else
{
marginSize = i = 1;
}
$('.slider').animate({ marginLeft: marginSize });   
}

t = setInterval(sliderLoop,3000);
});