Question

大家早上好:)我在这里遇到了一个问题，这已经是我脖子上的痛苦了2天了。我正在使用bxSlider在页面上滑动图像，我在onAfterSlide回调中调用自己的函数。除了一件事，一切都很好。当我在幻灯片之间快速切换时，我的功能被调用2-3次（我在页面上有3个图像），这不好，因为它会返回意外的结果。我无法使用最新版本的bxSlider，因为标记已更改。我认为会发生这种情况，因为调用onAfterSlide回调时动画仍未完成。这就是我调用bxSlider的方式：

$('#slider_bx').bxSlider({
    mode: 'fade',
    speed: 1000,
    pause: 9000,
    auto: true,
    autoControls: false,
    prevText: '',
    nextText: '',
    autoHover: true,
    captions: false,
    pager: true,
    onBeforeSlide: function () {
        if ($('.slide_in').length) {
            $('.slide_in').hide();
        }
    },
    onAfterSlide: function () {
        if ($('.slide_in').length && $('.slide_in').is(':hidden')) {
            doCrazyStuff();
        }
    }
});

这是我的职责：

function doCrazyStuff() {
    var $this = $('.slide_in');
    if ($this.length > 0) {
        setTimeout(function () {
            $this.show();
            $this.rotate({
                duration: 2000,
                angle: 90,
                animateTo: -20
            });
        }, 3000);
    }
}

任何帮助表示赞赏。感谢。

修改我试图添加.stop()，但没有帮助。

$this.show().stop();
$this.stop().show();
$this.stop().rotate({
    duration: 2000,
    angle: 90,
    animateTo: -20
});

$this.rotate({
    duration: 2000,
    angle: 90,
    animateTo: -20
}).stop(); // throws an error

Answer 1

尝试使用

$('.slide_in').stop()

在幻灯片功能之后，我希望它能够正常工作，如果可能的话，尽量尝试给代码提供帮助。

Answer 2

查看代码我认为问题不在于您的代码：但是因为您已将auto设置为true，因此插件计时器不会停止并且会按照常规间隔滑动图像。所以我希望在你的自定义函数中使用stopAuto（）bxSlider函数可以解决问题。完成你的工作后不要忘记开始车展。感谢

Answer 3

您可以取消超时或检查它是否正在运行如果您只想运行上一次超时：

var crazyTimeout;
function doCrazyStuff() {
    var $this = $('.slide_in');
    if ($this.length > 0) {
        if (crazyTimeout != undefined) {
            clearTimeout(crazyTimeout); // Cancel previous timeout
        }
        crazyTimeout = setTimeout(function () {
            crazyTimeout = undefined;
            $this.show();
            $this.rotate({
                duration: 2000,
                angle: 90,
                animateTo: -20
            });
        }, 3000);
    }
}

如果您只想运行第一个超时：

var crazyTimeout;
function doCrazyStuff() {
    var $this = $('.slide_in');
    if ($this.length > 0) {
        if (crazyTimeout != undefined) {
            return; // A timeout is still running: don't create new one
        }
        crazyTimeout = setTimeout(function () {
            crazyTimeout = undefined;
            $this.show();
            $this.rotate({
                duration: 2000,
                angle: 90,
                animateTo: -20
            });
        }, 3000);
    }
}

bxSlider onAfterSlide回调

3 个答案: