setInterval и clearInterval

208

27 апреля 2019, 18:30

'use strict'; 
 
 
var time = 0; 
var sec = 0; 
var min = 0; 
var hour = 0; 
var timer = 0; 
var timeSec = document.getElementById('sec'); 
var timeMin = document.getElementById('min'); 
var timeHour = document.getElementById('hour'); 
var pos = 0; 
 
function start() { 
	var timeStart = Math.round((new Date()).getTime()/1000); 
	var timerId = setInterval(function() { 
		var timeNow = Math.round((new Date()).getTime()/1000); 
		time = timeNow - timeStart; 
		sec = time % 60; 
		min = ((time - time % 60) / 60) % 60; 
		hour = ((time - time % 3600) / 3600 ); 
		// console.log(sec+" "+min+" "+hour); 
		if (sec < 10) { 
			timeSec.innerHTML = "0"+sec; 
		} else { 
			timeSec.innerHTML = sec; 
		}; 
		if (min < 10) { 
			timeMin.innerHTML = "0"+min; 
		}else { 
		timeMin.innerHTML = min; 
		} 
		if(hour < 10) { 
			timeHour.innerHTML = "0"+hour; 
		} else { 
			timeHour.innerHTML = hour; 
		} 
	} , 1000); 
} 
 
function reset() { 
	clearInterval(timerId); 
	time = 0; 
	sec = "--"; 
	timeSec.innerHTML = sec; 
	timeMin.innerHTML = sec; 
	timeHour.innerHTML = sec; 
}

<div class="container"> 
		<div class="header">Секундомер</div> 
		<div class="watch"> 
			<h1><b id="output"><span id="hour">--</span>:<span id="min">--</span>:<span id="sec">--</span></b></h1> 
		</div> 
		<div class="buttons"> 
			<button onclick="start()">Start/Stop</button> 
			<button onclick="reset()">Reset</button> 
		</div> 
		<footer></footer> 
	</div>

не пойму в чем проблема, почему timerId undefined?

Answer 1

Вынеси объявление timerId, потому что данная переменная является локальной в контексте функции start() и не всплывает в глобальную область видимости.

Решение:

'use strict'; 
 
 
var time = 0; 
var sec = 0; 
var min = 0; 
var hour = 0; 
var timer = 0; 
var timeSec = document.getElementById('sec'); 
var timeMin = document.getElementById('min'); 
var timeHour = document.getElementById('hour'); 
var pos = 0; 
var timerId; 
 
function start() { 
  var timeStart = Math.round((new Date()).getTime() / 1000); 
  timerId = setInterval(function() { 
    var timeNow = Math.round((new Date()).getTime() / 1000); 
    time = timeNow - timeStart; 
    sec = time % 60; 
    min = ((time - time % 60) / 60) % 60; 
    hour = ((time - time % 3600) / 3600); 
    // console.log(sec+" "+min+" "+hour); 
    if (sec < 10) { 
      timeSec.innerHTML = "0" + sec; 
    } else { 
      timeSec.innerHTML = sec; 
    }; 
    if (min < 10) { 
      timeMin.innerHTML = "0" + min; 
    } else { 
      timeMin.innerHTML = min; 
    } 
    if (hour < 10) { 
      timeHour.innerHTML = "0" + hour; 
    } else { 
      timeHour.innerHTML = hour; 
    } 
  }, 1000); 
} 
 
function reset() { 
  clearInterval(timerId); 
  time = 0; 
  sec = "--"; 
  timeSec.innerHTML = sec; 
  timeMin.innerHTML = sec; 
  timeHour.innerHTML = sec; 
}

<div class="container"> 
  <div class="header">Секундомер</div> 
  <div class="watch"> 
    <h1><b id="output"><span id="hour">--</span>:<span id="min">--</span>:<span id="sec">--</span></b></h1> 
  </div> 
  <div class="buttons"> 
    <button onclick="start()">Start/Stop</button> 
    <button onclick="reset()">Reset</button> 
  </div> 
  <footer></footer> 
</div>

Answer 2

Вам необходимо вывести var timerId за пределами функции start()

'use strict'; 
 
 
var time = 0; 
var sec = 0; 
var min = 0; 
var hour = 0; 
var timer = 0; 
var timeSec = document.getElementById('sec'); 
var timeMin = document.getElementById('min'); 
var timeHour = document.getElementById('hour'); 
var pos = 0; 
var timerId = ''; 
 
function start() { 
	var timeStart = Math.round((new Date()).getTime()/1000); 
	timerId = setInterval(function() { 
		var timeNow = Math.round((new Date()).getTime()/1000); 
		time = timeNow - timeStart; 
		sec = time % 60; 
		min = ((time - time % 60) / 60) % 60; 
		hour = ((time - time % 3600) / 3600 ); 
		// console.log(sec+" "+min+" "+hour); 
		if (sec < 10) { 
			timeSec.innerHTML = "0"+sec; 
		} else { 
			timeSec.innerHTML = sec; 
		}; 
		if (min < 10) { 
			timeMin.innerHTML = "0"+min; 
		}else { 
		timeMin.innerHTML = min; 
		} 
		if(hour < 10) { 
			timeHour.innerHTML = "0"+hour; 
		} else { 
			timeHour.innerHTML = hour; 
		} 
	} , 1000); 
} 
 
function reset() { 
	clearInterval(timerId); 
	time = 0; 
	sec = "--"; 
	timeSec.innerHTML = sec; 
	timeMin.innerHTML = sec; 
	timeHour.innerHTML = sec; 
}

<div class="container"> 
		<div class="header">Секундомер</div> 
		<div class="watch"> 
			<h1><b id="output"><span id="hour">--</span>:<span id="min">--</span>:<span id="sec">--</span></b></h1> 
		</div> 
		<div class="buttons"> 
			<button onclick="start()">Start/Stop</button> 
			<button onclick="reset()">Reset</button> 
		</div> 
		<footer></footer> 
	</div>