javascript - 多次滑动函数调用

Question

我创建了一个简单的 JavaScript 文件，其中有 2 张图片。

这里的人可以向左或向右滑动，相应 map 像滑动。

这是我的代码，

$('#landscapeimage1').swiperight(function (event) { //here lanscapeimage1 is canvas on which i have drawn an image.

    var width = window.innerWidth;
    var slide = "+=" + width + "px";
    $('#landscapeimage').animate({
        'left': -width
    }, 1, function () {
        $('#landscapeimage1').animate({
            "left": slide
        }, "fast", function () {});
        $('#landscapeimage').animate({
            "left": slide
        }, "fast", function () {
            currentImage = getPreviousImage();
            currentCanvas = "landscapeimage";

            drawImage();
            $(this).unbind(event);
            return false;
        });
        return false;
    });

    return false;
});

最初，当我滑动时它工作正常，但如果我访问相同的图像，那么它会再次调用相同的函数，直到没有未访问的图像出现，如果我已经访问了所有图像，它就会变成一个无限循环。

我不明白为什么会这样。

我已经尝试停止动画和解除绑定(bind)滑动功能，但这也不起作用。

<div data-role="page" id="imagepage">

            <div class="whiteBackground" id="landscapeimage" style="position: relative;">
                <canvas id="image" style="z-index: 1;position:absolute;left:0px;top:0px;" height="200px" width="200px">
                </canvas>
                </div>

<div class="whiteBackground" id="landscapeimage1" style="position: relative;">
                <canvas id="image1" style="z-index: 1;position:absolute;left:0px;top:0px;" height="200px" width="200px">
                </canvas>
                </div>

        </div>

调试后发现animate函数调用了多次；不是滑动功能，但我不明白为什么？请帮帮我。

有人知道为什么会这样吗？

Answer 1

您的代码有问题:

$('#landscapeimage1').off().swiperight(function (event) { 
    //code here
    return false;
});

或者:

var flag = true;
    if( flag ){
       // Set flag
       flag = false;
       $('#landscapeimage1').swiperight(function (event) { 
       //code here
       return false;
    });
}

因为，当你滑动时，事件会触发很多次:一次 1，两次 1+1 等等。