Question

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

此处此人可向左或向右滑动＆amp;相应的图像滑动。

这是我的代码，

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

最初，当我滑动它工作正常但如果我访问相同的图像，那么它再次调用相同的功能＆amp;再次，直到未访问的图像没有出现＆amp;如果我访问了所有图像，那么它就会变成无限循环。

我不明白为什么会这样。

我试图停止动画＆amp;取消绑定滑动功能，但这也无效。

<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次，两次以上......

多次滑动函数调用

1 个答案: