スライダが何度もスライドする

Question

イベントリスナーtouchstartとtouchmoveを持つスライダを作成しようとしています。

ボタンをクリックすると、スライダが非常にうまく動作します。しかし、指を左から右に動かすと、最後の画像まで何度もスライドしますが、一度スライドするだけです。また、スライドバックすることはできません。

var i = 0; 

// Go next 
$('.next').bind('click', function() {   
    niceSlider('left', '<'); 
}); 

// Go Back 
$('.back').bind('click', function() { 
    niceSlider('right', '>', 0); 
}); 

// Greather or less 
function greatherOrLess(num1, operator, num2) { 
    if (operator == '<') { 
    return (num1 < num2) ? true : false; 
    } 
    else if (operator == '>') { 
    return (num1 > num2) ? true : false; 
    } 
} 

// Slider 
function niceSlider(direction, operator, NumberOfAllImages = 4, position = 600) { 
    var direction = (direction == 'left') ? '-' : '+'; 
    if (greatherOrLess(i, operator, NumberOfAllImages)) { 
    if (direction == '+' || direction == '-') { 
     $('li').animate({'left': direction + '=600px'}, 300).delay(600); 
     x = (direction == '-') ? i++ : i--; 
    } 
    } 
    console.log($('li:first').position().left); 
    console.log(x); 
} 

// Event Listener 
var slider = document.querySelector('.slider'); 
slider.addEventListener('touchstart', handleTouchStart, false); 
slider.addEventListener('touchmove', handleTouchMove, false); 

// Start from touch 
function handleTouchStart(evt) { 
    startClientX = evt.touches[0].clientX; 
    startClientY = evt.touches[0].clientY; 
} 

// Move from touch 
function handleTouchMove(evt) { 
    moveClientX = evt.touches[0].clientX; 
    moveClientY = evt.touches[0].clientY; 

    var diffClientX = startClientX - moveClientX; 
    var diffClientY = startClientY - moveClientY; 

    if (Math.abs(diffClientX) > Math.abs(diffClientY)) { 
    if (diffClientX > 0) { 
     niceSlider('left', '<'); 
    } 
    else { 
     niceSlider('right', '>'); 
    } 
    } 
} 

機能handleTouchMoveに問題があります。どうすれば修正できますか？ここで

https://jsfiddle.net/6t1wx95f/16/

Answer 1

function handleTouchStart(evt) { 
    startClientX = evt.touches[0].clientX; 
    startClientY = evt.touches[0].clientY; 
    checkTouch = true; 
} 

// Move from touch 
function handleTouchMove(evt) { 
    moveClientX = evt.touches[0].clientX; 
    moveClientY = evt.touches[0].clientY; 

    if (checkTouch) { 
    var diffClientX = startClientX - moveClientX; 
    var diffClientY = startClientY - moveClientY; 
    if (Math.abs(diffClientX) > Math.abs(diffClientY)) { 
     if (diffClientX > 0) { 
     niceSlider('left', '<'); 
     } else { 
     niceSlider('right', '>', 0); 
     } 
    } 
    checkTouch = false; 
    } 
} 

function handleTouchEnd(evt) { 
    checkTouch = true; 
} 

一度だけブール値を使用していないか確認し、jsFiddleです。タッチの移動で次の機能がすべての移動を呼びかけていました。