Get length of touchevent

Question

How can I get the time between touchstart and touchend in javasscript.

    // define startTime variable
    var startTime = 0;

    function initi() {
        console.log('init');
        // Get a reference to our touch-sensitive element
        var touchzone = document.getElementById("myCanvas");
        // Add an event handler for the touchstart event
        touchzone.addEventListener("mousedown", startTouch, false);
        // You need mouseup to capture the stop event                          
        touchzone.addEventListener("mouseup", stopTouch, false);
    }

    function startTouch(event) {
        // You can access the event here too..
        // But for demo I will only get the current Time

        startTime = new Date().getTime();
    }

    function stopTouch(event) {
        // Get a reference to our coordinates div
        var can = document.getElementById("myCanvas");
        // Write the coordinates of the touch to the div
        if (event.pageX < x * 100 && event.pageY > y * 10) {
            // Calculate the duration, only if needed
            var duration = new Date().getTime() - startTime;

            bally -= 0.001 * duration; // use duration
        }

        // I hope bally if defined in the outer scope somewhere ;)                    
        console.log(event, x, bally);
        draw();
    }

The longer the time between touchstart and touchend the more the ball should move, but how can I get the time/length of the touchevent?

Answer 1

var startTime = 0;
function start() {
   startTime = new Date().getTime();
}

function stop() {
  var duration = (new Date().getTime() - startTime);
  growBar(duration);
}

var clickEle = document.getElementsByTagName("button")[0];
var timerEle = document.getElementsByClassName("timer")[0];
var ms = document.getElementById('ms');
clickEle.onmousedown = start;
clickEle.onmouseup = stop;

function growBar(timerCount) {
    ms.innerHTML = timerCount;
    timerEle.setAttribute("style", "width:" + timerCount + "px;");
}

.bar {
  height: 10px;
  width: 100%;
  background: black;
}
.timer {
  width: 0;
  height: 100%;
  background: red;
}

<button id="button-id">Click This!</button>
<div><strong id="ms"></strong> ms</div>
<div class="bar">
  <div class="timer"></div>
</div>

Answer 2

You can start a Javascript Interval, of any number of milliseconds (depending on "smoothness" needed). See this below, mimicking what you can do, just using mousedown and mouseup events.

var clickEle = document.getElementsByTagName("button")[0];
var timerEle = document.getElementsByClassName("timer")[0];
var COUNTER_INCREMENT = 10; // In milliseconds
var timerCount = 0;
var timer = null;

clickEle.onmousedown = startTimer;
clickEle.onmouseup = stopTimer;

function startTimer() {
  timer = setInterval(incrementTimer, COUNTER_INCREMENT);
}

function incrementTimer() {
  timerCount += COUNTER_INCREMENT;

  // For Demo purposes only
  timerEle.innerHTML = timerCount;
}

function stopTimer() {
  clearInterval(timer);
  timerCount = 0;
}

<button>Click This!</button>
<p>
  <strong>How Long Was the Mouse Held Down for?</strong>
  <span class="timer">0</span> milliseconds
</p>

Or you can use requestAnimationFrame which is a little more optimal, but its availability depends on the browsers you're supporting. https://css-tricks.com/using-requestanimationframe/

var clickEle = document.getElementsByTagName("button")[0];
var timerEle = document.getElementsByClassName("timer")[0];
var COUNTER_INCREMENT = 10; // In milliseconds
var startTime = 0;
var timerCount = 0;
var timer = null;

clickEle.onmousedown = startTimer;
clickEle.onmouseup = stopTimer;

function startTimer() {
  timer = window.requestAnimationFrame(incrementTimer);
  startTime = new Date();
}

function incrementTimer() {
  var newTimerCount = new Date() - startTime;

  // Update the DOM sparingly
  if(newTimerCount - timerCount > COUNTER_INCREMENT) {
    // For Demo purposes only
    timerEle.innerHTML = timerCount = newTimerCount;
  }
  timer = window.requestAnimationFrame(incrementTimer)
}

function stopTimer() {
  cancelAnimationFrame(timer);
  timerCount = 0;
}

<button>Click This!</button>
<p>
  <strong>How Long Was the Mouse Held Down for?</strong>
  <span class="timer">0</span> milliseconds
</p>

Answer 3

var clickEle = document.getElementsByTagName("button")[0];
var timerEle = document.getElementsByClassName("timer")[0];
var msEle = document.getElementById('ms');
var COUNTER_INCREMENT = 1; // In milliseconds
var timerCount = 0;
var timer = null;

clickEle.onmousedown = startTimer;
clickEle.onmouseup = stopTimer;

var ms = 0;
function startTimer() {
  ms = new Date().getTime();
  timer = setInterval(incrementTimer, COUNTER_INCREMENT);
}

function incrementTimer() {
  timerCount += COUNTER_INCREMENT;

  // For Demo purposes only
  timerEle.innerHTML = timerCount;
}

function stopTimer() {
  clearInterval(timer);
  timerCount = 0;
  msEle.innerHTML = new Date().getTime() - ms;
}

<button>Click This!</button>
<p>
  <strong>How Long Was the Mouse Held Down for?</strong>
  <span class="timer">0</span> milliseconds
</p>
<p><span id="ms"></span> real milliseconds</p>

Answer 4

You have to define the startTime variable somewhere, in the "outer scope", where both functions have access to. the when you call the first function it will just change its value, the second function can access the variable too ;)

var startTime = 0;
function one() {
   startTime = new Date().getTime();
}

function two() {
  var duration = new Date().getTime() - startime;
  console.log(duration + 'ms between one() and two()');
}

var btn = document.getElementById('some-btn-id');
btn.onmousedown = one;
btn.onmouseup = two;