JQuery用微调器装饰按钮(在事件前后做一些事情)

Question

$("#get-data").on("click", function() {
const btn = $(this)
const btnHtml = btn.html()
btn.html($('#spinner-html').html())
btn.prop('disabled', true)
setTimeout(() => {
// this is my ajax immitation

// on ajax complete:
btn.html(btnHtml)
btn.prop('disabled', false)
}, 2000)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="spinner-html" style="display: none">
Loading...
</div>
<button id="get-data">Get Data</button>

我希望调用某些API的ajax调用的每个按钮都被禁用并显示微调器，直到API调用完成。

这个想法是让它可以重复使用。即ajax部分(此处表示为setTimeout(不应引用单击的按钮。

这非常有效，但我觉得用ajax为每个按钮重复按钮HTML的6行代码是可以避免的代码重复。

所以我希望它具有通用性和可重复使用性。我尝试过这种方式(以及一些变体(，但没有奏效。。。

function spinnerClick(b, f) {
const btn = $(b)
const btnHtml = btn.html()
btn.html($('#spinner-html').html())
btn.prop('disabled', true)
f()
btn.html(btnHtml)            // this goes immediately
btn.prop('disabled', false)
}
function getData() {
// all ajax stuff here
}
$('#get-data').on('click', function () {
spinnerClick(this, getData)
})

如有任何建议，我们将不胜感激。谢谢

UPD：JS fiddle添加

Answer 1

感谢您添加jsfiddle，请尝试一下！

function spinnerClick(b, f) {
const btn = $(b)
const btnHtml = btn.html()
btn.html($('#spinner-html').html())
btn.prop('disabled', true)
f().then(() => {
btn.html(btnHtml)
btn.prop('disabled', false)
});
}
function getData() {
return new Promise((resolve) => {setTimeout(() => {
console.log('hello');
resolve(true);
}, 2000);
})
}
$('#get-data').on('click', function () {
spinnerClick(this, getData)
})

Answer 2

我可能有误解，但为什么不将实例发送到一个单独的函数，以便在它解析时访问它呢？

$(function() {
$('button').click(function() {
doAjax($(this));
})
})
function doAjax(btn) {
if (btn.find('span.spinner').length > 0) return console.log('wait, still running');
btn.removeClass('finished').append('<span class="spinner"> * </span>');
setTimeout(function() {
btn.addClass('finished').find('span.spinner').remove()
}, 2000)
}

.finished {
background: green;
color: white;
}
.spinner {
color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Click 1</button>
<button>Click 2</button>
<button>Click 3</button>