多次滑动函数调用

Question

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

在这里，该人可以向左或向右滑动，并相应地滑动图像。

这是我的代码，

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

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

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 等等。