确定变量是增加还是减少？

Question

Basically, I am trying to determine what direction a user is swiping moving their finger on an iOS device using javascript.

I know I can figure out where the finger is by using:

e.originalEvent.touches[0].pageX;

So my idea was to

1. Store the location of the first move position, say 130

2. Determine the location of the next position, say 129

3. If the current position is greater than, it's moving to the right. less than, moving to the left

The only problem is that it would be running in an event like this:

$(".container").on("touchmove", function (e) {
    e.preventDefault();
});

So I'm not sure the best way to store the previous location, then the next location, and check to see if they're greater than or less than.

My original idea was to use something like this:

$(".container").on("touchstart", function (e) {
    e.preventDefault();
    original = e.originalEvent.touches[0].pageX;
});

$(".container").on("touchmove", function (e) {
    e.preventDefault();
    direction = e.originalEvent.touches[0].pageX;
    if (direction > original) {
        console.log("right");
    } else {
        console.log("left");
    }
});

But that would only determine if the swipe was to the left or right of the origin, not the left or right of the previous finger position.

Answer 1

It looks like you're almost there - you should be able to get the behavior that you want by updating the point that you're comparing to each time the event is called, like this:

$(".container").on("touchstart", function (e) {
    e.preventDefault();
    lastPosition = e.originalEvent.touches[0].pageX;
});

$(".container").on("touchmove", function (e) {
    e.preventDefault();
    currentPosition = e.originalEvent.touches[0].pageX;
    if (currentPosition > lastPosition) {
        console.log("right");
    } else {
        console.log("left");
    }
    lastPosition = currentPosition;
});

That said, depending on the platform and what you are trying to achieve, you might find that simply comparing the current position against the previous position gives results that are too "noisy" (ie because the user's finger isn't touching just one pixel, you might see output like "right", "right", "left", "right", "right", "left", "right", ..., when the user is slowly moving their finger right). If that happens, you might want to do something like record the last 5 previous positions and compare them, like this:

var positions = [];
$(".container").on("touchstart", function (e) {
    e.preventDefault();
    positions.push(e.originalEvent.touches[0].pageX);
});

$(".container").on("touchmove", function (e) {
    e.preventDefault();
    positions.push(e.originalEvent.touches[0].pageX);

    var direction = 0;
    var i;
    for (i = 0; i < positions.length - 1; i++) {
        if (positions[i + 1] > positions[i]) {
            direction++;
        } else {
            direction--;
        }
    }

    if (direction > 0) {
        console.log("right");
    }
    else {
        console.log("left");
    }

    if (positions.length > 5) {
        positions.shift();
    }
});