Question

我写了这段代码（按照我的方式学习），每当他/她感觉到一个脉冲时，它会测量每分钟的节拍数。点击10次后，js代码获取数组中的所有值并计算平均BPM。

在此之后，如果我们想要再次使用它，您可以再次开始点击。但问题是，代码继续基于以前的值。如何才能使其在10次点击后，您可以使用新的测量值再次开始“新鲜”？

//Eigen stukje JS -- Hartmeting Tool//

//Initial Variables
var timeLastClick = 0;
var bpm = 0;

//My list
var beats = [];

var average = 0;
var count = 0;


var klik_Hart = document.getElementById("klik_Hart");

//obtain time of last click.
$(klik_Hart).on('click', function() {
  var tapSeconds = new Date().getTime();

  //calculate difference Beats Per Minute.
  bpm = ((1 / ((tapSeconds - timeLastClick) / 1000)) * 60);
  timeLastClick = tapSeconds;

  //show image of an heart while clicking.
  klik_Hart.innerHTML = '<h1 style="display:inline;margin-left:40%;">' + Math.floor(bpm);

  //Throw values in beats list.
  beats.push(Math.floor(bpm));
  average *= count;  //average = average * count
  average += Math.floor(bpm);  //average = average + count
  count++; //count on.
  average /= count;  //average = average / count

  //If the list contains 10 values, give pop-up displaying measured values and average.
  if(beats.length >= 10) {

    //pop up van gemeten resultaten en de gemiddelde hartslag.
    alert("The measured values are: \n\n" + beats + "\n\nUw average heartrate is:\n\n" + average+" bpm");

  }
});

.heart{
  color:#FBF9FF;
  background-image: url("http://placehold.it/350x150");
  background-size: 150px 150px;
  height: 150px; 
  width: 150px;
}

.heart:hover{
  color: #FFA07A;
  background-color: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="klik_Hart" class="heart"></div>

如何有效解决这个问题？

Answer 1

根据您的示例代码，解决此问题的简单方法就是重置变量（tijdLaatsteClick，bpm，beats，average，count ）一旦你出现警报就到了初始状态。

请注意alert之后的代码块：

// re-initialise
tijdLaatsteClick = 0;
bpm = 0;
beats = [];
average = 0;
count = 0;

有许多方法可以重新分解代码，以更简洁或优雅的方式执行您想要的操作，但这可以完成工作：

＆＃13;

//Eigen stukje JS -- Hartmeting Tool//

var tijdLaatsteClick = 0;
var bpm = 0;

//My list
var beats = [];

var average = 0;
var count = 0;

var klik_Hart = document.getElementById("klik_Hart");

//obtain time of last click.
$(klik_Hart).on('click', function() {
    var tapSeconds = new Date().getTime();

//calculate difference Beats Per Minute.
bpm = ((1 / ((tapSeconds - tijdLaatsteClick) / 1000)) * 60);
tijdLaatsteClick = tapSeconds;

//show image of an heart while clicking.
klik_Hart.innerHTML = '<h1 style="display:inline;margin-left:40%;">' + Math.floor(bpm);

//+ '</h1><br><img style="height:35px;width:35px;margin-left:50%;" src="img/heart.png"/>'

//Throw values in beats list.
beats.push(Math.floor(bpm));
average *= count;  //average = average * count
average += Math.floor(bpm);  //average = average + count
count++; //count on.
average /= count;  //average = average / count

//If the list contains 10 values, give pop-up displaying measured values and average.
if(beats.length >= 10) {

  //pop up van gemeten resultaten en de gemiddelde hartslag.
  alert("The measured values are: \n\n" + beats + "\n\nUw average heartrate is:\n\n" + average+" bpm");
  
  // re-initialise
  tijdLaatsteClick = 0;
  bpm = 0;
  beats = [];
  average = 0;
  count = 0;
}
});

＆＃13;

.heart{
        color:#FBF9FF;
        background-image: url("http://placehold.it/350x150");
        background-size: 150px 150px;
        height: 150px; 
        width: 150px;
    }

    .heart:hover{
        color: #FFA07A;
        background-color: grey;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="klik_Hart" class="heart"></div>

＆＃13;

请注意，您的代码存在错误，timeLastClick必须替换为tijdLaatsteClick。

Answer 2

显示警告（）后，您可以将所有“初始变量”设置回0。

Answer 3

您想要重新计算BPM，就像用户首次打开页面一样。它们开始点击后和第一次加载页面之间的唯一区别是初始变量已经更改。因此，点击10次后，重新启动＆＃39;那些vars他们的原始价值。它看起来像这样：

<!-- Code Ommitted-->
    if(beats.length >= 10) {

        //pop up van gemeten resultaten en de gemiddelde hartslag.
        alert("The measured values are: \n\n" + beats + "\n\nUw average heartrate is:\n\n" + average+" bpm");
          beats = [];
          average = 0;
          count = 0;

        }

如何让我的JS代码在服务目的后再次开始'新鲜'？

3 个答案: