触发xhr请求的for循环内的Javascript setInterval和closeInterval

我一直在阅读各种类似的问题，但是我无法为我的具体案例找到帮助，如果有人可以帮助我解决我所面临的这个问题，我会非常感激，因为我不太精通JS和AJAX

我有一个HTML页面，该页面在表格中显示一系列项目：

<table class="table table-striped">
        <thead class="thead-dark">
            <tr>
            <th scope="col">Crawl</th>
            <th scope="col">Date</th>
            <th scope="col">Status</th>
            <th scope="col">Status</th>
            <th scope="col">Action</th>
            </tr>
        </thead>
        <tbody>
            
            
            <tr>
            <td class="crawl" task_id="6094590cc05111ea872d6003089f5d66">627b1b39-1f37-48aa-9a19-e6955470d80e</td>
            <td>07/07/2020</td>
            <td>Y</td>
            <td id="crawl-status-6094590cc05111ea872d6003089f5d66"></td>
            <td>
                <button class="btn btn-success">See analysis</button>
                <button class="btn btn-danger">Delete</button>
            </td>
            </tr>
            
            <tr>
            <td class="crawl" task_id="0d44e2dac05311ea93bc6003089f5d66">bc7b0ce3-9bfb-41ff-b88b-6415cb6a1091</td>
            <td>07/07/2020</td>
            <td>Y</td>
            <td id="crawl-status-0d44e2dac05311ea93bc6003089f5d66"></td>
            <td>
                <button class="btn btn-success">See analysis</button>
                <button class="btn btn-danger">Delete</button>
            </td>
            </tr>
            
        
        </tbody>
        </table>

每行基本上都是正在运行或过去已运行的站点的爬网，因此，在“状态”列中，我们可以有3个选项：“待处理”，“正在运行”和“完成”。我已经创建了一个对端点的xhr调用，以获取每个爬网的状态并填充表中的状态单元：

crawls = document.getElementsByClassName("crawl")


var i;
for (i = 0; i < crawls.length; i++) {
    
    crawl_item = crawls[i]

    // Grab task ID for each crawl
    task_id = crawl_item.getAttribute("task_id")

    // Check crawl status
    crawlStatus(task_id)

}







// Get the crawl status by making a GET request to the API URL
function crawlStatus(task_id){
    const xhr = new XMLHttpRequest()
    const method = 'GET'
    const url = '/crawler/crawl-status/' + task_id + "/" 

    const responseType = "json"
    var csrftoken = getCookie('csrftoken')

    xhr.responseType = responseType
    xhr.open(method,url)

    xhr.setRequestHeader("Content-Type", "application/json")
    xhr.setRequestHeader("HTTP_X_REQUESTED_WITH","XMLHttpRequest")
    xhr.setRequestHeader("X-Requested-With","XMLHttpRequest")
    xhr.setRequestHeader("X-CSRFToken", csrftoken)
            

    xhr.onload = function(){

        var serverResponse = xhr.response

        crawl_status_cell = document.getElementById("crawl-status-"+ task_id)
        crawl_status_cell.innerText = serverResponse.status



   
        
    }

    xhr.send()
}   

这可以正常工作，但是我无法每2-3秒重复一次此请求以检查新状态。如果初始状态为“待处理”或“正在运行”，则该功能应再次检查，直到状态为“完成”，然后停止。

我已经尝试过使用setInterval，但是之后无法使用clearIntervals清除它。问题是我不预先知道表中将有多少行，因此我无法分别为它们中的每一行触发crawlStatus函数。

我尝试了很多组合，其中的组合如下：

function crawlStatus(task_id){
    const xhr = new XMLHttpRequest()
    const method = 'GET'
    const url = '/crawler/crawl-status/' + task_id + "/" 

    const responseType = "json"
    var csrftoken = getCookie('csrftoken')

    xhr.responseType = responseType
    xhr.open(method,url)

    xhr.setRequestHeader("Content-Type", "application/json")
    xhr.setRequestHeader("HTTP_X_REQUESTED_WITH","XMLHttpRequest")
    xhr.setRequestHeader("X-Requested-With","XMLHttpRequest")
    xhr.setRequestHeader("X-CSRFToken", csrftoken)
            

    xhr.onload = function(){

        var serverResponse = xhr.response

        crawl_status_cell = document.getElementById("crawl-status-"+ task_id)
        crawl_status_cell.innerText = serverResponse.status

        if(serverResponse.status === "pending" || serverResponse.status === "running"){
            setInterval("crawlStatus(task_id)", 500);
        } else {
            
            clearInterval("crawlStatus(task_id))
            
        }

   
        
    }

    xhr.send()
}   

有人遇到过类似的问题，可以帮助我解决吗？另外，如果您知道最好的做事方法，请随时提出建议！

非常感谢任何尝试帮助我的人！ ：）

歪斜