如何让我的JS代码在用完后再次启动'新鲜'？

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; 

有许多的方式来重新因子的代码做你更加简洁，或优雅的方式想要什么，但这个能够完成任务：

//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; 
 
} 
 
});

.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/1.9.1/jquery.min.js"></script> 
 
<div id="klik_Hart" class="heart"></div>

注意你的代码有错误，使得timeLastClick必须由tijdLaatsteClick取代。

Answer 2

显示alert（）后，您可以将所有'初始变量'重新设置为0。

Answer 3

您想重新计算BPM，就好像用户第一次打开页面一样。他们开始点击之后和第一次加载页面之间的唯一区别是初始变量已被更改。因此，在点击10次后，“重新初始化”这些变量会改变它们的原始值。它看起来像这样：

<!-- 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; 

     }