setTimeout을 사용할 때 코드가 작동하지 않음

debugcn 에 게시 Dev

비슈 1990

음성 입력을 사용할 수 있고 입력을 기반으로 다른 페이지로 마이그레이션 할 수있는 코드를 작성하려고합니다. 내 코드는 시간 초과가 사용될 때 대기하지 않고 시간 초과가 없으면 코드가 입력을 기다리고 있지 않습니다. HTML 페이지 :

<script src="Content/SpeechRecognisation.js" type="text/javascript"></script>
    <script src="Content/SpeechUtterance.js" type="text/javascript"></script>
    <script src="Content/LoginScript.js" type="text/javascript"></script>
    <script src="Content/Additional.js" type="text/javascript"></script>
    <title>Login Screen</title>
    <meta charset="utf-8" />
</head>

<body onload="Typer()"></body>

Js 파일의 자바 스크립트 코드 :

function LoginPageSpeech() {
    pageName = 'LoginPage';
    controlPointer = "1";
    var CPR_No = final_transcript;
    $("#txtCPRNo").val(final_transcript);
    var pageDetail = "Entered CPR Number is " + final_transcript;
    CustomerResponse = final_transcript;
    speak(pageDetail);
    setTimeout(function(){},4000);
    speak("if details are correct ,please say yes else say no after beep");
    setTimeout(function () { SoundMake(); }, 4000);
    setTimeout(function() {startDictation(event);},3000);
    setTimeout(function() { },4000);
    if (final_transcript == "YES") {
        setTimeout(AuthenticationMsg,7000);
    }
    else
    {
//        setTimeout(function () { speak("Sorry.Please repeat again after beep"); }, 4000);
//        setTimeout(function () { SoundMake(); }, 3000);
//        setTimeout(function () { startDictation(event); }, 3000);
//        
//        LoginPageSpeech();
    }
}


function Typer() {
    pageName = "LoginPage";
    speak('Welcome ,Please Speak your CPR Number after a beep');

    setTimeout(function () { SoundMake(); }, 4000);
    timeOutValue = 9000;
    setTimeout(function () { startDictation(event); }, 4000);

}
function SoundMake() {
    var snd = new Audio("data:audio/wav;base64,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qJrx4KOQjahZxWbcZgztj2c49nKmkId44S71j0c8eV9yDK6uPRzx5X18eDvjvQ6yKo9ZSS6l//8elePK/Lf//IInrOF/FvDoADYAGBMGb7FtErm5MXMlmPAJQVgWta7Zx2go+8xJ0UiCb8LHHdftWyLJE0QIAIsI+UbXu67dZMjmgDGCGl1H+vpF4NSDckSIkk7Vd+sxEhBQMRU8j/12UIRhzSaUdQ+rQU5kGeFxm+hb1oh6pWWmv3uvmReDl0UnvtapVaIzo1jZbf/pD6ElLqSX+rUmOQNpJFa/r+sa4e/pBlAABoAAAAA3CUgShLdGIxsY7AUABPRrgCABdDuQ5GC7DqPQCgbbJUAoRSUj+NIEig0YfyWUho1VBBBA//uQZB4ABZx5zfMakeAAAAmwAAAAF5F3P0w9GtAAACfAAAAAwLhMDmAYWMgVEG1U0FIGCBgXBXAtfMH10000EEEEEECUBYln03TTTdNBDZopopYvrTTdNa325mImNg3TTPV9q3pmY0xoO6bv3r00y+IDGid/9aaaZTGMuj9mpu9Mpio1dXrr5HERTZSmqU36A3CumzN/9Robv/Xx4v9ijkSRSNLQhAWumap82WRSBUqXStV/YcS+XVLnSS+WLDroqArFkMEsAS+eWmrUzrO0oEmE40RlMZ5+ODIkAyKAGUwZ3mVKmcamcJnMW26MRPgUw6j+LkhyHGVGYjSUUKNpuJUQoOIAyDvEyG8S5yfK6dhZc0Tx1KI/gviKL6qvvFs1+bWtaz58uUNnryq6kt5RzOCkPWlVqVX2a/EEBUdU1KrXLf40GoiiFXK///qpoiDXrOgqDR38JB0bw7SoL+ZB9o1RCkQjQ2CBYZKd/+VJxZRRZlqSkKiws0WFxUyCwsKiMy7hUVFhIaCrNQsKkTIsLivwKKigsj8XYlwt/WKi2N4d//uQRCSAAjURNIHpMZBGYiaQPSYyAAABLAAAAAAAACWAAAAApUF/Mg+0aohSIRobBAsMlO//Kk4soosy1JSFRYWaLC4qZBYWFRGZdwqKiwkNBVmoWFSJkWFxX4FFRQWR+LsS4W/rFRb/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////VEFHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAU291bmRib3kuZGUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMjAwNGh0dHA6Ly93d3cuc291bmRib3kuZGUAAAAAAAAAACU=");
    snd.play();
}

Tricot

당신이 사용하는 setTimeout잘못된 방법으로. 예를 들어,이 부분을보십시오 :

setTimeout(function(){},4000);
speak("if details are correct ,please say yes else say no after beep");
setTimeout(function () { SoundMake(); }, 4000);
setTimeout(function() {startDictation(event);},3000);
setTimeout(function() { },4000);

실행이 첫 번째 줄에서 4 초 동안 중단 된 다음 두 번째 줄에서만 계속 될 것으로 예상하는 것 같습니다. 그러나 그것은 사실이 아닙니다. 지연되는 유일한 것은 인수로 전달하는 함수 setTimeout입니다. 나중에 호출됩니다. 그러나 엔진은 즉시 다음 진술을 계속할 것입니다. 사실, 기능의 아무도 당신을 통과하지 setTimeout 수 있는 모든 나머지 코드가 실행되기 전에 실행합니다.

그래서 ... 이제 위 블록의 첫 번째 줄이 무용지물임을 알 수 있습니다. 그것은 말한다 : "다음 문으로 계속 지금 지금부터 아무것도 4 초 동안 할 수 없으며," .

어떻게 고치는 지

몇 가지 방법이 있습니다.

1. 지연 시간 누적

모든 setTimeout호출이 거의 동시에 실행 된다는 것을 알고 있으므로 이전 지연에도 포함되는 지연을 지정합니다.

setTimeout(function(){
    speak("if details are correct, please say yes else say no after beep");
},4000);
setTimeout(function () { SoundMake(); }, 4000+4000);
setTimeout(function() {startDictation(event);},4000+4000+3000);
setTimeout(function() { 
    // ...etc
},4000+4000+3000+4000);

단점은 다음과 같습니다.

한 번의 지연으로 마음이 바뀌면 여러 위치에 적용해야합니다. 다음 지연에 따라 증가하는 변수를 사용하여이 문제에 대응할 수 있습니다.
예약 된 작업 중 하나에 많은 시간이 걸리거나 브라우저가 다른 작업으로 바쁠 때 작업 사이의 간격이 예상보다 훨씬 작아 질 수 있습니다.

2. 콜백 중첩

여기에 제공된 이전 콜백 안에 다음 작업을 넣습니다 setTimeout.

setTimeout(function(){
    speak("if details are correct, please say yes else say no after beep");
    setTimeout(function () { 
        SoundMake();
        setTimeout(function() {
            startDictation(event);
            setTimeout(function() { 
                // ...etc
            }, 4000);
        }, 3000);
    }, 4000);
}, 4000);

단점은 다음과 같습니다.

소위 "콜백 지옥" : 코드가 매우 깊숙이 중첩 될 수 있으며 극단적 인 경우 편집기는 대부분 공백을 표시 할 수 있으며 오른쪽으로 스크롤 할 때만 코드가 표시됩니다. 이것은 실용적이지 않습니다.

3. 재귀

여기에서 다음 타이머가 틱할 때 다시 호출하는 동일한 함수를 계속 호출합니다.

(function loop(i) {
    var delay = 300;
    switch (i) {
    case 0:
        // Do nothing, just launch the setTimeout
        break;
    case 1:
        speak("if details are correct, please say yes else say no after beep");
        break;
    case 2: 
        SoundMake();
        delay = 300;
        break;
    case 3:
        startDictation(event);
        break;
    default:
        // etc...
        return; // start no more timeout
    }
    setTimeout(loop.bind(null, i+1), delay); 
})(0); // start with 0

단점은 다음과 같습니다.

이 switch진술은 매우 장황합니다. 또는 각 객체에 함수 속성으로 실행되는 코드와 다른 속성으로 지연이있는 객체 배열을 만들 수도 있습니다. 그런 다음 loop본문 에서 색인을 생성 할 수 있습니다 .

4. 약속

ES6 이후 Promise많은 프로그래머가이 목적으로 사용하도록 권장 하는 객체 가 있습니다.

// Utility to get a promise object that resolves after a given delay
function promiseDelay(delay) {
    return new Promise(function (resolve) {
        setTimeout(resolve, delay);
    });
}

promiseDelay(400)
.then(function() {
    speak("if details are correct ,please say yes else say no after beep");
    return promiseDelay(4000);
}).then(function () { 
    SoundMake();
    return promiseDelay(3000);
}).then(function () {
    startDictation(event);
    return promiseDelay(4000);
}).then(function () {
    // etc...
});

이 코드는 매우 깨끗하고 간결합니다.

비고

위의 코드는 코드의 일부만 다룹니다. Typer 함수 에도 동일한 문제가 있습니다. 그러나 원칙은 동일합니다. 선호하는 솔루션을 전체적으로 적용하십시오.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-16

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사