用 window.stop 停止 Promise [重复]

Question

我正在使用 fetch 获取 json 数据并使用结果呈现列表项。包含fetch 的函数由按钮触发。但是，如果我在初始 fetch 仍在运行时单击它，来自它的数据将在我的新呼叫之上加载。

我已使用window.stop() 来阻止此行为，但有更好的解决方案吗？

function updateTable() {

    fetch('/json')
    .then((response) => {return response.json()})
    .then((response) => { 
        response.records.forEach(el => {
            return '<li>' + el.Name + '</li>';
        })
    })
}

$('button').click(function(){
    window.stop();
    $('body').empty();
    updateTable()
})

已编辑答案：在重新阅读链接线程时，使用fetch 使用新的signal 属性，我更新了我的代码以使用新的AbortController。记录here 的诀窍是在再次调用该函数时重新定义控制器。与window.stop() 相比的优势在于，停止只会影响fetch。

var controller = "";
var signal = "";

function updateTable() {

  controller = new AbortController();
  signal = controller.signal;

    fetch('/json', {signal})
    .then((response) => {return response.json()})
    .then((response) => { 
        response.records.forEach(el => {
            return '<li>' + el.Name + '</li>';
        })
    })
}

$('button').click(function(){
    controller.abort();
    $('body').empty();
    updateTable()
})

Answer 1

这可以通过一个简单的变量来完成。这用于确定 fetch 是否仍在处理中。

var allRecords = [];
var processing = false;

function updateTable() {

    fetch('/json' )
    .then((response) => {return response.json()})
    .then((response) => { 
        processing = false;
        response.records.forEach(el => {
            return '<li>' + el.Name + '</li>';
        })
    })
}

$('button').click(function(){

    if(processing === false){
        processing = true;
        $('body').empty()
        updateTable()
    }
})