setTimeout/clearTimeout 문제
나는 10초 동안의 비활성(아무 곳도 클릭하지 않는 사용자) 후에 시작 페이지로 이동하기 위해 페이지를 만들려고 합니다.나머지는 jQuery를 사용하지만 테스트 기능의 set/clear는 순수 자바스크립트입니다.
답답한 마음에 저는 페이지를 클릭할 때 언제든지 호출할 수 있기를 바랐던 이 기능과 같은 기능을 가지게 되었습니다.타이머는 정상적으로 시작되지만 클릭 한 번으로 재설정되지는 않습니다.이 기능이 처음 10초 이내에 5번 호출되면 5개의 경고가 표시됩니다.시간 초과가 확실하지 않습니다...
function endAndStartTimer() {
window.clearTimeout(timer);
var timer;
//var millisecBeforeRedirect = 10000;
timer = window.setTimeout(function(){alert('Hello!');},10000);
}
효과가 있는 코드 라인을 가지고 있는 사람? - 클릭을 중지하고 타이머를 리셋하고 시작합니다. - 타이머가 작동하면 10초 동안 무언가를 합니다.
신고해야 합니다.timer 기능 밖의그렇지 않으면 각 함수 호출에 새로운 변수가 표시됩니다.
var timer;
function endAndStartTimer() {
window.clearTimeout(timer);
//var millisecBeforeRedirect = 10000;
timer = window.setTimeout(function(){alert('Hello!');},10000);
}
문제는.timer변수는 local이며 각 함수 호출 후 값이 손실됩니다.
이를 지속해야 하거나, 함수 외부에 배치할 수도 있으며, 변수를 전역으로 노출하지 않으려면 다음과 같이 폐쇄 상태로 저장할 수도 있습니다.
var endAndStartTimer = (function () {
var timer; // variable persisted here
return function () {
window.clearTimeout(timer);
//var millisecBeforeRedirect = 10000;
timer = window.setTimeout(function(){alert('Hello!');},10000);
};
})();
그것은 타이머가 당신의 기능에 대한 지역 변수이기 때문입니다.
함수 외부에서 만들어 봅니다.
이를 반응에 사용하는 방법:
class Timeout extends Component {
constructor(props){
super(props)
this.state = {
timeout: null
}
}
userTimeout(){
const { timeout } = this.state;
clearTimeout(timeout);
this.setState({
timeout: setTimeout(() => {this.callAPI()}, 250)
})
}
}
예를 들어 사용자가 입력을 중지한 후에만 API를 호출하려면 도움이 됩니다.userTimeout 함수는 onKeyUp을 통해 입력에 바인딩될 수 있습니다.
이것이 좋은 연습 코딩 규칙을 위반하는 것인지 확실하지 않지만 저는 보통 다음과 같은 것을 제시합니다.
if(typeof __t == 'undefined')
__t = 0;
clearTimeout(__t);
__t = setTimeout(callback, 1000);
이렇게 하면 타이머를 기능 밖으로 선언할 필요가 없습니다.
편집: 또한 호출할 때마다 새로운 변수를 선언하는 것이 아니라 항상 동일한 변수를 재활용합니다.
도움이 되길 바랍니다.
실용적인 예 드롭다운 메뉴에 Jquery 사용! #IconLoggedinUxExternal에서 마우스 위에 div#ExternalMenuLogin을 표시하고 div#ExternalMenuLogin을 숨기기 위해 시간 제한을 설정합니다.
div#ExternalMenuLogin의 마우스 오버에서 시간 초과를 취소합니다.div#ExternalMenuLogin에서 마우스 아웃 시 시간 초과를 설정합니다.
여기서 중요한 점은 항상 시간 초과를 설정하기 전에 clearTimeout을 호출하여 이중 호출을 방지하는 것입니다.
var ExternalMenuLoginTO;
$('#IconLoggedinUxExternal').on('mouseover mouseenter', function () {
clearTimeout( ExternalMenuLoginTO )
$("#ExternalMenuLogin").show()
});
$('#IconLoggedinUxExternal').on('mouseleave mouseout', function () {
clearTimeout( ExternalMenuLoginTO )
ExternalMenuLoginTO = setTimeout(
function () {
$("#ExternalMenuLogin").hide()
}
,1000
);
$("#ExternalMenuLogin").show()
});
$('#ExternalMenuLogin').on('mouseover mouseenter', function () {
clearTimeout( ExternalMenuLoginTO )
});
$('#ExternalMenuLogin').on('mouseleave mouseout', function () {
clearTimeout( ExternalMenuLoginTO )
ExternalMenuLoginTO = setTimeout(
function () {
$("#ExternalMenuLogin").hide()
}
,500
);
});
이거 잘 되네요.행사를 진행하기 위해 제가 만든 매니저입니다.이벤트를 보류할 수도 있고, 보낼 때도 있습니다.
function onUserHold(element, func, hold, clearfunc) {
//var holdTime = 0;
var holdTimeout;
element.addEventListener('mousedown', function(e) {
holdTimeout = setTimeout(function() {
func();
clearTimeout(holdTimeout);
holdTime = 0;
}, hold);
//alert('UU');
});
element.addEventListener('mouseup', clearTime);
element.addEventListener('mouseout', clearTime);
function clearTime() {
clearTimeout(holdTimeout);
holdTime = 0;
if(clearfunc) {
clearfunc();
}
}
}
요소 매개 변수는 고정되어 있는 매개 변수입니다.func 매개 변수는 매개 변수 홀드로 지정된 밀리초 동안 유지될 때 실행됩니다.clearfunc 매개변수는 선택사항이며, 만약 이 매개변수가 주어지면 사용자가 요소를 놓거나 떠날 경우 발생합니다.원하는 기능을 얻기 위해 몇 가지 해결 방법을 수행할 수도 있습니다.맛있게 드세요.:)
<!DOCTYPE html>
<html>
<body>
<h2>EJEMPLO CONOMETRO CANCELABLE</h2>
<button onclick="inicioStart()">INICIO</button>
<input type="text" id="demostracion">
<button onclick="finStop()">FIN</button>
<script>
let cuenta = 0;
let temporalTiempo;
let statusTime = false;
function cronometro() {
document.getElementById("demostracion").value = cuenta;
cuenta++;
temporalTiempo = setTimeout(cronometro, 500);
}
function inicioStart() {
if (!Boolean(statusTime)) {
statusTime = true;
cronometro();
}
}
function finStop() {
clearTimeout(temporalTiempo);
statusTime = false;
}
</script>
</body>
</html>언급URL : https://stackoverflow.com/questions/3015319/settimeout-cleartimeout-problems
'codememo' 카테고리의 다른 글
| PowerShell을 사용하여 모든 서비스의 "실행 경로"를 추출하는 방법 (0) | 2023.09.15 |
|---|---|
| rand() 함수 없이 난수를 생성하려면 어떻게 해야 합니까? (0) | 2023.09.15 |
| jQuery에서 태그 이름을 제공할 수 있습니까? (0) | 2023.09.15 |
| MySQL에서 (flow) 쿼리의 (stock) 결과를 축적하는 방법 (0) | 2023.09.15 |
| 레이아웃을 부풀려서 사용자 정의 보기를 작성하시겠습니까? (0) | 2023.09.15 |