external button puckjs

And here is the 'short' version:

// puckD1extPushButton2.js
pinMode(D1,"input_pullup");
var log = function() { console.log(arguments); }
  , lon = false // log on / off
  , wId
  , change = function(evt) {
      if (lon) log(evt);
      if (evt.state) {
        setTimeout(note,1,(Math.floor(evt.time - evt.lastTime)));
      }
    }
  , note = function (t) { // note (for show)
      console.log(t);
    }
  , start = function() {
        wId = setWatch(change,D1
                 ,{repeat:true, edge:"both",debounce:10});
    }
  ;
function onInit() {
  start();
}

setTimeout(onInit,999); // comment line before upload for save()

If you turn the logging on (lon = true), then you see what is goin on:

The evt is the event object passed to the function change() called by the watch. The watch is now setup repeat:true and edge:"both" : In other words, change() is called on press AND on release of the push button. The event object passed has 3 very convenient properties:

1. The state tells the state of the pin / what the has changed to - on press it is L/false and on release it is H/true,
   
2. The lastTime tells when the watch fired the last time. If it is the first time, then it is undefined
   
3. The time tells the time of the current watch firing.
   
   

Using the event object simplifies the code a lot. Below show the log of the event object. Notice the first time - when the button was pressed for the first time - lastTime is undefined. On press event of the button we have to do nothing, but on release, we calculate the difference and pass it to the show function. In this example, the show function just logs the value in the console.

Notice, that with this solution, we could run into time binds: new press and release events may happen faster than display can happen. Some queueing and asynchronous display of the result can help to avoid it. Calling note() with a timeout makes it also asynchronous. The function note() would then put t into a FIFO / Queue and - when it is the first entry - start the display process. The display process would then take value by value out of the FIFO / Queue and show the value until the FIFO/Queue is empty. Consuming the queue follows the same asynchronous pattern as in previous example the show function.

[
  { "state": false, "lastTime": undefined, "time": 1644153426.08500003814 }
 ]
[
  { "state": true, "lastTime": 1644153426.08500003814, "time": 1644153428.08899998664 }
 ]
[
  { "state": false, "lastTime": 1644153428.08899998664, "time": 1644153429.83899998664 }
 ]
[
  { "state": true, "lastTime": 1644153429.83899998664, "time": 1644153431.21399998664 }
 ]
[
  { "state": false, "lastTime": 1644153431.21399998664, "time": 1644153433.33699989318 }
 ]
....

Now, @user140111 - Alberto - it's your turn to complete the code and add the display logic with the queue and show. What makes the things so easy to understand is that there is only one thread executing JS... (speaking in os terms...).

(PS: My dad's first name was Albert - the German version of yours...).