получить позицию jquery touch каждые x миллисекунд

Question

есть способ получить положение касания в событии touchmove каждые x миллисекунд, а затем выполнить функцию, когда x-координата в данный момент и одна в начале отличаются друг от друга. 50px?

Thanks

Answer 1

Попробуйте нижеследующее;

$('document').ready(function() { 
 

 
    var touch, 
 
    action, 
 
    diffX, 
 
    diffY, 
 
    endX, 
 
    endY, 
 
    startX, 
 
    startY, 
 
    timer, 
 
    timerXseconds = 500, // Change to the Time(milliseconds) to check for touch position 
 
    xDifferenceX = 50, // Change to difference (px) for x-coordinates from starting point to run your function 
 
    xDifferenceY = 50; // Change to difference (px) for y-coordinates from starting point 
 

 
    function getCoord(e, c) { 
 
    return /touch/.test(e.type) ? (e.originalEvent || e).changedTouches[0]['page' + c] : e['page' + c]; 
 
    } 
 

 
    function testTouch(e) { 
 
    if (e.type == 'touchstart') { 
 
     touch = true; 
 
    } else if (touch) { 
 
     touch = false; 
 
     return false; 
 
    } 
 
    return true; 
 
    } 
 

 
    function onStart(ev) { 
 
    if (testTouch(ev) && !action) { 
 
     action = true; 
 
     startX = getCoord(ev, 'X'); 
 
     startY = getCoord(ev, 'Y'); 
 
     diffX = 0; 
 
     diffY = 0; 
 
     timer = window.setInterval(checkPosition(ev), timerXseconds); // get coordinaties ever X time 
 
     if (ev.type == 'mousedown') { 
 
     $(document).on('mousemove', onMove).on('mouseup', onEnd); 
 
     } 
 

 
    } 
 
    } 
 

 
    function onMove(ev) { 
 
    if (action) { 
 
     checkPosition(ev) 
 
    } 
 
    } 
 

 
    function checkPosition(ev) { 
 
    endX = getCoord(ev, 'X'); 
 
    endY = getCoord(ev, 'Y'); 
 
    diffX = endX - startX; 
 
    diffY = endY - startY; 
 
    // Check if coordinates on Move are Different than Starting point by X pixels 
 
    if (Math.abs(diffX) > xDifferenceX || Math.abs(diffY) > xDifferenceY) { 
 
    // console.log('Start is :' + startX + ' End is : ' + endX + 'Difference is : ' + diffX); 
 
     $(this).trigger('touchend'); 
 

 
     // here Add your function to run... 
 
    } 
 

 
    } 
 

 
    function onEnd(ev) { 
 
    window.clearInterval(timer); 
 
    if (action) { 
 
     action = false; 
 
     if (ev.type == 'mouseup') { 
 
     $(document).off('mousemove', onMove).off('mouseup', onEnd); 
 
     } 
 
    } 
 
    } 
 

 
    $('#monitor') 
 
    .bind('touchstart mousedown', onStart) 
 
    .bind('touchmove', onMove) 
 
    .bind('touchend touchcancel', onEnd); 
 
});

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#monitor { 
 
    height: 500px; 
 
    width: 500px; 
 
    position: relative; 
 
    display: block; 
 
    left: 50px; 
 
    top: 50px; 
 
    background: green; 
 
} 
 
.box { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    bottom: 0; 
 
    background: white; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin: auto; 
 
    font-size: 16px; 
 
    line-height: 23px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id='monitor'> 
 
    <div class='box'>start here</div> 
 
</div>

Прочитайте эту post для более детального ответа

Answer 2

Это может быть сделано в нескольких функциях.

• Первая функция вызывается, когда происходит движение сенсорного события, это событие запоминает х и у ощупь в отдельной переменной.

• Тогда у нас есть функция, которая запускается каждые X miliseconds, эта функция получает x и y из события перемещения и отправляет затем ваш код.

• Функции 3, 4 и 5 используются для обработки пуска, останова и отмены dragevents и старт/стоп вторую функцию:

var timerid; 
 
var x; 
 
var y; 
 
var tick = 0; 
 

 
function handleStart(evt) { 
 
    console.log("handleStart"); 
 
    evt.preventDefault(); 
 
    timerid = window.setInterval(timer, 50); // Replace 50 here with X 
 
} 
 

 
function handleEnd(evt) { 
 
    console.log("handleEnd"); 
 
    evt.preventDefault(); 
 
    window.clearInterval(timerid); 
 
} 
 

 
function handleCancel(evt) { 
 
    console.log("handleCancel"); 
 
    evt.preventDefault(); 
 
    window.clearInterval(timerid); 
 
} 
 

 
function handleMove(evt) { 
 
    console.log("handleMove"); 
 
    evt.preventDefault(); 
 
    // Select last point: 
 
    var point = evt.changedTouches[evt.changedTouches.length - 1]; 
 
    x = point.pageX; 
 
    y = point.pageY; 
 
} 
 

 
function timer() { 
 
    console.log("timer"); 
 
    tick++; 
 
    document.getElementById("output").innerHTML = "tick: " + tick + " x: " + x + " y:" + y; 
 
} 
 

 

 
var el = document.getElementById("canvas"); 
 
el.addEventListener("touchstart", handleStart, false); 
 
el.addEventListener("touchend", handleEnd, false); 
 
el.addEventListener("touchcancel", handleCancel, false); 
 
el.addEventListener("touchmove", handleMove, false);

<canvas id="canvas" width="300" height="300" style="border:solid black 1px;"></canvas> 
 
<p id=output></p>

Пока пользователь нажимает экран, код распечатывает координаты x и y на экране. Вы можете также интегрировать чтение x и y в существующий игровой цикл вместо отдельной функции, если это необходимо для вашего проекта.

Answer 3

Взгляните на hammer.js, он имеет именно то, что вам нужно. Он поддерживает «touchmove» под названием pan, который вызывается каждые несколько миллисекунд при панорамировании. Также есть свойство threshold, которое определяет длину в пикселях, которые вы должны панорамировать, прежде чем распознавать ее как панорамирование.