移动端 jQuery 的 动画使用 stop() 方法失效？

Question

在做移动端轮播滑动效果的时候，发现在2个元素之间快速滑动切换的时候，动画会出现不停滚动的问题，于是加了 stop() 来阻止，结果发现还是会出现问题。

也试过用 .clearQueue 方法，但也无效。

发现问题好像是当前一个动画没有完全完成，下个就开始了，平时遇到这种情况，用 stop 方法就可以解决了，为什么在移动端不行？难道 stop 方法只移动端不管用了？但百度了一下，也没发现有这个说法的。

演示地址：http://www.xxy5.com/photo/ord... （请使用chrome响应式模拟器）
效果gif：

我的代码：

$(document).on('touchstart', '.dialog', function(e) {
    var touch = e.originalEvent,
        startX = e.originalEvent.changedTouches[0].pageX,
        startY = e.originalEvent.changedTouches[0].pageY;
    // 开始滑动
    $(this).on('touchmove', function(e) {
        e.preventDefault();
        moveEndX = e.originalEvent.changedTouches[0].pageX,
            moveEndY = e.originalEvent.changedTouches[0].pageY,
            X = moveEndX - startX,
            Y = moveEndY - startY,
            index = $('.tip-dot').find('span').index($('.current'));            // 获取当前是第几个产品的索引
        if (Math.abs(X) > Math.abs(Y) && X > 0) {
            // console.log("左划");
            index--;
            if ( index < 0 ) {
                touchMoveAlert('已经是第一个产品了！')
                $(this).off('touchmove');
                return;
            }
            var ml = parseInt( $('.dialog').css('marginLeft') );
            $('.dialog').stop(true,true).animate({
                marginLeft: ml + $(window).width()
            }, 'fast');
            touchMoveTip(); // 小圆点 current
            // dialog position
            dialogPosition( index );
            $(window).resize(function() {
                dialogPosition( index );
            });
            $(this).off('touchmove');
        } else if (Math.abs(X) > Math.abs(Y) && X < 0) {
            // console.log("右划");
            index++;
            if (index >= $('.tip-dot').find('span').length) {
                touchMoveAlert('已经是最后一个产品了！')
                $(this).off('touchmove');
                return;
            }
            var ml = parseInt( $('.dialog').css('marginLeft') );
            $('.dialog').stop(true,true).animate({
                marginLeft: ml - $(window).width()
            }, 'fast');
            touchMoveTip(); // 小圆点 current
            // dialog position
            dialogPosition( index );
            $(window).resize(function() {
                dialogPosition( index );
            });
            $(this).off('touchmove');
        } else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
            // console.log("top 2 bottom");
            $(this).off('touchmove');
        } else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
            // console.log("bottom 2 top");
            $(this).off('touchmove');
        }
    });
    // return false;
}).on('touchend', function() {
    $(this).off('touchmove');
});

Answer 1

当快速滑动的时候，console出现了一个警告（只有模拟你说的那种快速切换滑动才出现）：

Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

然后我去stackoverflow看了一下，发现也有人和你一样的情况，上面采纳的解决办法是 在touchend加一个return true;

你可以试一下，问题地址：

https://stackoverflow.com/que...