如何使用 setTimeout 在遞歸 function 中延遲 for 循環？

Question

問題：

我正在嘗試制作一個工具來幫助我在一個文件夾中組織一堆隨機照片以及 HTML 文檔中的一堆帖子。 我的代碼工作正常，並且做了它應該做的事情。 但是有很多照片，我需要在我的 function 上放慢 for 循環。 它只工作一分鍾，然后瀏覽器不斷崩潰。 我想要做的是實現一個 setTimeout function 來減慢循環速度，這樣我就可以成功地循環所有數據。 主要問題是我不知道將 setTimeout function 放在哪里或在哪里調用它。 我嘗試了各種設置超時的方法，我也嘗試使用異步和等待睡眠 function。 我將 HashTags (#'s) 放在我需要幫助的部分周圍。 頁面頂部的 setTimeout 和底部的循環。 任何幫助深表感謝。

代碼：

<script>

//  **#### DELAY FUNCTION ####**
// **#### BREAKS RECURSION ####**
   
function delay(j) { 

    setTimeout(function() { 
    
    }, 2000 * j);
    
}

function loop(node){
    
    // LOOP THROUGH INDIVIDUAL NODES

    var currentElement = node.childNodes;
    
    for (var i = 0; i < currentElement.length; i++){
    
        // CHECKS FOR RECURSION

        if (!currentElement[i]){
        
            alert("CONTINUED");
            
            continue;
        }

        if (currentElement[i].childNodes.length > 0){
                
            var currElemTag = currentElement[i].tagName;
            var currElemClass = currentElement[i].className;
                
            // PHOTO AND VIDEO, HYPERLINK FILTER
                
            if (currElemTag == 'A') {
                
                var currElemHref = currentElement[i].href;
                
                if (currElemHref.includes('.jpg') == true || currElemHref.includes('.mp4') == true) {

                    
                    // MP4 - JPG HANDLER
                    
                    var outputConsole = document.getElementById('outputConsole');
                    
                    if(currElemHref.includes('.jpg') == true) {
                        var newElement = '<'+currElemTag+' href="'+currElemHref+'">'+'<img src="'+currElemHref+'"></img></A><br>';
                        outputConsole.innerHTML+=newElement+'\r\n';     
                    }
                    
                    if(currElemHref.includes('.mp4') == true) {
                        var newElement = '<'+currElemTag+' href="'+currElemHref+'">'+'<video src="'+currElemHref+'"></video></A><br>';
                        outputConsole.innerHTML+=newElement+'\r\n';     
                    }
        
                }
                
                
            }
                
            // MAIN POST
                
            else if (currElemTag == 'DIV' && currElemClass == "_2pin") {
                
                var currElemStr = currentElement[i].innerHTML;
                

                var mainPost = currElemStr.substring(
                
                    currElemStr.lastIndexOf('<div>') + 5,
                    currElemStr.lastIndexOf('</div>')
                    
                );
                
                var outputConsole = document.getElementById('outputConsole');
                var newElement = '<'+currElemTag+'>'+mainPost+'</DIV><br>';
                outputConsole.innerHTML+=newElement+'\r\n';
                
            }
                
            // SUBPOST OF SPECIFIC PHOTO
                
            else if (currElemTag == 'DIV' && currElemClass == "_3-95") {
                
                var currElemStr = currentElement[i].innerHTML;
                var outputConsole = document.getElementById('outputConsole');
                var newElement = '<'+currElemTag+'>'+currElemStr+'</DIV><br>';
                outputConsole.innerHTML+=newElement+'\r\n'; 
            
            }

            
            // POST DATE
            
            else if (currElemTag == 'DIV' && currElemClass == "_3-94 _2lem") {
                
                var currElemStr = currentElement[i].innerHTML;
                    
                var postDate = currElemStr.substring(
                
                    currElemStr.lastIndexOf('">') + 2,
                    currElemStr.lastIndexOf('</a>')
                    
                );
                    
                var outputConsole = document.getElementById('outputConsole');
                var newElement = '<'+currElemTag+'>'+postDate+'</DIV><br>';
                outputConsole.innerHTML+=newElement+'\r\n\r\n\r\n';
                
                // alert("THE DATE OF THIS POST IS: " + postDate);
                
            }
                
                
            else {
                
                var outputConsole = document.getElementById('outputConsole');
                outputConsole.innerHTML+='ELEMENT DELETED!!!'+'\r\n';
                
                // alert(currElemTag + " Named: " + currElemClass + " WILL BE DELETED!!!");

                
                
            }
            
            // #### FUNCTION LOOPS HERE ####
            // #### START DELAY ####

            delay(i);
            loop(currentElement[i]);
        }       
        
    }
    
}

Answer 1

將代碼包裝在 setTimeout 中的 for 循環中。 您還可以將 j 作為 function 參數傳遞。

for(var i = 0; i < currentElement.length; i++) {
   setTimeout(function() {
     // Your code
   }, 2000 * j) // Pass j as a function parameter in your loop function
}

Answer 2

如果可能的話，讓你的loop function async ，這樣你就可以在每次迭代后await 2 秒。

您可以定義delay function 以返回Promise ，這將在幾秒鍾后解決。

function delay(millis) {
    return new Promise(resolve => {
        setTimeout(resolve, millis);
    });
}

將您的loop function 定義為async ，您已准備好 go。

async function loop() {
    const currentElement = node.childNodes;
    for (let i = 0; i < currentElement.length; i++){
        // Do your stuff
        
        // Wait for 2 secs
        await delay(2000);
    }
}

我建議您在最后等待遞歸調用loop 。

 //... await delay(2000); await loop(...);

希望能幫助到你。