你如何在计时器中调用启动和停止功能

Question

你好，我不久前在 SO 上发现了一个很棒的计时器，我想知道如何调用启动和停止函数，所以当你调用启动函数时，计时器启动，当你调用停止函数时计时器停止。我已经尝试了很多不同的解决方案，但无论如何我还是无法弄清楚这里是代码：

<!DOCTYPE html>
<html>
<head>
<title>JS Bin</title>
<style>
.stopwatch {
    display: inline-block;
    background-color: white;
    border: 1px solid #eee;
    padding: 5px;
    margin: 5px;
}
.stopwatch span {
    font-weight: bold;
    display: block;
}
.stopwatch a {
    padding-right: 5px;
    text-decoration: none;
}
</style>
</head>
<body>
<h2>Basic example; update every 1 ms</h2>

<p>click <code>start</code> to start a stopwatch</p>

<pre>
var elems = document.getElementsByClassName("basic");

for (var i=0, len=elems.length; i&lt;len; i++) {
     new Stopwatch(elems[i]);
}
</pre>
<div class="basic stopwatch"></div>
<hr>
<script>
var Stopwatch = function(elem, options) {

var timer       = createTimer(),
    startButton = createButton("start", start),
    stopButton  = createButton("stop", stop),
    resetButton = createButton("reset", reset),
    offset,
    clock,
    interval;

// default options
options = options || {};
options.delay = options.delay || 1;

// append elements     
elem.appendChild(timer);
elem.appendChild(startButton);
elem.appendChild(stopButton);
elem.appendChild(resetButton);

// initialize
reset();

// private functions
function createTimer() {
   return document.createElement("span");
}

function createButton(action, handler) {
   var a = document.createElement("a");
   a.href = "#" + action;
   a.innerHTML = action;
   a.addEventListener("click", function(event) {
      handler();
      event.preventDefault();
   });
   return a;
}

function start() {
   if (!interval) {
     offset   = Date.now();
     interval = setInterval(update, options.delay);
   }
}

function stop() {
   if (interval) {
     clearInterval(interval);
     interval = null;
   }
}

function reset() {
   clock = 0;
   render(0);
}

function update() {
   clock += delta();
   render();
}

function render() {
   timer.innerHTML = clock/1000; 
}

function delta() {
   var now = Date.now(),
   d = now - offset;

   offset = now;
   return d;
}

// public API
this.start  = start;
this.stop   = stop;
this.reset  = reset;
};


// basic examples
var elems = document.getElementsByClassName("basic");

for (var i=0, len=elems.length; i<len; i++) {
    new Stopwatch(elems[i]);
}
</script>
</body>
</html>

Answer 1

如果您查看代码，您会发现每个按钮都是使用以下函数创建的：

  function createButton(action, handler) {
    var a = document.createElement("a");
    a.href = "#" + action;
    a.innerHTML = action;
    a.addEventListener("click", function(event) {
      handler();
      event.preventDefault();
    });
    return a;
  }

所有这一切都是将一系列链接附加到 DOM，每个链接都有一个单击事件处理程序调用相关函数（作为 handler 变量传递）、停止、启动或重置。

要直接调用其中一个，您只需调用该函数即可 - 例如stop()

var Stopwatch = {
  init: function(elem, options) {

    var timer = createTimer(),
      startButton = createButton("start", start),
      stopButton = createButton("stop", stop),
      resetButton = createButton("reset", reset),
      offset,
      clock,
      interval;

    // default options
    options = options || {};
    options.delay = options.delay || 1;

    // append elements     
    elem.appendChild(timer);
    elem.appendChild(startButton);
    elem.appendChild(stopButton);
    elem.appendChild(resetButton);

    // initialize
    reset();

    // private functions
    function createTimer() {
      return document.createElement("span");
    }

    function createButton(action, handler) {
      var a = document.createElement("a");
      a.href = "#" + action;
      a.innerHTML = action;
      a.addEventListener("click", function(event) {
        handler();
        event.preventDefault();
      });
      return a;
    }

    function start() {
      if (!interval) {
        offset = Date.now();
        interval = setInterval(update, options.delay);
      }
    }

    function stop() {
      if (interval) {
        clearInterval(interval);
        interval = null;
      }
    }

    function reset() {
      clock = 0;
      render(0);
    }

    function update() {
      clock += delta();
      render();
    }

    function render() {
      timer.innerHTML = clock / 1000;
    }

    function delta() {
      var now = Date.now(),
        d = now - offset;

      offset = now;
      return d;
    }

    // public API
    this.start = start;
    this.stop = stop;
    this.reset = reset;
  }
};

// basic examples
var elems = document.getElementsByClassName("basic");

for (var i = 0, len = elems.length; i < len; i++) {
  Stopwatch.init(elems[i]);
}

.stopwatch {
  display: inline-block;
  background-color: white;
  border: 1px solid #eee;
  padding: 5px;
  margin: 5px;
}
.stopwatch span {
  font-weight: bold;
  display: block;
}
.stopwatch a {
  padding-right: 5px;
  text-decoration: none;
}

<div class="basic stopwatch"></div>
<button onclick="Stopwatch.stop()">STOP!</button>

你如何在计时器中调用启动和停止功能

How do you call the start and stop function in a timer

javascript

jquery

html

css

timer