JavaScript:setTimeOut 位于另一个 setTimeOut 中(嵌套 setTimeOut)以刺激 API 响应不起作用

Question

要求:用户连续扫描文本框中的作业编号，没有任何延迟。对于每个职位编号，我需要在后台调用 API 来获取扫描职位编号的详细信息。

我做了什么:我编写了一个小模拟代码来激发这个需求。我使用 setTimeOuts 延迟用户扫描并延迟 API 响应

问题:延迟扫描工作正常，但延迟 API 响应不起作用。

jsbin 链接 code in jsbin

请运行以下代码并检查控制台。

var dataset = [10, 20, 30];
var delay = 100;
var apiDelay = 3000;



function execute(dataset) {    
    var i = 0;
    scannedJob(dataset, i);
}


//1ST TIME OUT METHOD//
function scannedJob(dataset, i) {

    setTimeout(function() {
              console.log("Scanned Job Number ="+dataset[i]+" @  time = " + new Date().toLocaleTimeString());


        fireJobSearchHttpAPI1(dataset[i]);

        i++;

        if (dataset.length > i) {
            self.scannedJob(dataset, i);
        } else {
            i = 0;
        }
    }, delay);
}

//2nd TIME OUT METHOD//

/* TWO TYPES OF METHODS I WRITTEN , BOTH ARE NOT WORKING,
EXPECTED:  Each API call should fire with 5sec delay. Instead all 3 api calls given response after 5 seconds. I need each call should take 5sec and total at the end it should take 15 seconds., 
BUT FIRING ALL THE JOB NUMBERS IMMEDIATELY WITHOUT DELAY
*/
function fireJobSearchHttpAPI1(jobNum) {
        setTimeout(function() {
            console.log("job number '"+jobNum+"' API FIRED @ " + new Date().toLocaleTimeString());
        }, apiDelay);

}


function fireJobSearchHttpAPI2(jobNum) {
    (function myLoop(i) {
        setTimeout(function() {
            console.log("job number '"+jobNum+"' API FIRED  @ " + new Date().toLocaleTimeString());
           if (--i) myLoop(i);
        }, apiDelay)
    })(1);

}


//Main Method
execute(dataset);

Answer 1

您需要将当前索引作为参数传递，因此您需要将该索引乘以当前的API调用延迟，因此第一步是什么时候(索引= 0) ，所以你应该这样做 (index + 1) * apiDelay 那么它将是 5000，第二步，index 将是 1 然后 (index + 1) * apiDelay将为 10000，最后一步 index 将为 2，则 (index + 1) * apiDelay 将为 15000。

在底部，对您当前的代码进行了一些修改。

var dataset = [10, 20, 30];
var delay = 100;
var apiDelay = 5000;



function execute(dataset) {    
    var i = 0;
    scannedJob(dataset, i);
}


//1ST TIME OUT METHOD//
function scannedJob(dataset, i) {

    setTimeout(function() {
              console.log("Scanned Job Number ="+dataset[i]+" @  time = " + new Date().toLocaleTimeString());


        fireJobSearchHttpAPI1(dataset[i], i);

        i++;

        if (dataset.length > i) {
            self.scannedJob(dataset, i);
        } else {
            i = 0;
        }
    }, delay);
}

//2nd TIME OUT METHOD//

/* TWO TYPES OF METHODS I WRITTEN , BOTH ARE NOT WORKING,
EXPECTED:  Each API call should fire with 5sec delay. Instead all 3 api calls given response after 5 seconds. I need each call should take 5sec and total at the end it should take 15 seconds., 
BUT FIRING ALL THE JOB NUMBERS IMMEDIATELY WITHOUT DELAY
*/
function fireJobSearchHttpAPI1(jobNum, index) {
        console.log("index", ((index + 1) * apiDelay))
        setTimeout(function() {
            console.log("job number '"+jobNum+"' API FIRED @ " + new Date().toLocaleTimeString());
        }, ((index + 1) * apiDelay));

}


function fireJobSearchHttpAPI2(jobNum) {
    (function myLoop(i) {
        setTimeout(function() {
            console.log("job number '"+jobNum+"' API FIRED  @ " + new Date().toLocaleTimeString());
           if (--i) myLoop(i);
        }, apiDelay)
    })(1);

}


//Main Method
execute(dataset);