只需1次点击即可获得2个Ajax请求

Question

我正在编写一个使用jquery 3.2.1提供的ajax功能的应用程序。

我遇到了一个问题，当我单击链接一次时，它会生成两个ajax请求-我可以在浏览器的“网络”标签中看到这些请求。

点击发生在ID为removeAllFiltersBtn的超链接上：

<a href="/remove-filter/all" id="removeAllFiltersBtn">remove all filters</a>

我对ajax调用有以下要求：

$('#removeAllFiltersBtn').click(function(e){
    e.preventDefault();

    $.ajax({
        context: this,
        url: $(this).attr('href'),
        method: 'get'
    }).done(function(response) {
        if (response.result === 'all_filters_removed') {
            $('.filters-panel').hide();
        } 
        if (response.n_filters === 0) {
            $('.filters-panel').hide();
        }
    }).done(function () { 
        debouncedDraw();
    });
});

我已阅读Ajax, prevent multiple request on click并尝试了以下操作：

1. 在函数末尾添加return false。

2. 添加$(this).prop('disabled', true);以禁用按钮。我把它放在$.ajax({ ...

之前

.done中名为debouncedDraw();的函数运行另一个更新表的函数。此请求发生在上面的ajax请求之后，称为/search。因此，在“网络”标签中，我看到了：

为什么有两个对/remove-filter/all的请求，我怎么能只给一个请求？

我已经阅读了Promises，但不确定是否与我遇到的问题有关。有人可以简单地解释一下吗？