Javascript 多次滑动函数调用

我创建了一个简单的JavaScript文件，其中有两个图像

在这里，用户可以向左或向右滑动&相应地，图像可以滑动

这是我的密码

$('#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;
});

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

我不明白为什么会这样

我试图停止动画和取消绑定滑动功能，但也不起作用

<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函数调用了多次；不是刷卡功能，但我不知道为什么？请帮帮我。

有人知道为什么会发生这种情况吗？

您的代码有问题：

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

或：

---

因为，当您一次滑动1、两次滑动1+1以及更多时，事件会多次触发。

那么我可以在哪里设置标志？

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