$("#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 小提琴
uj5u.com熱心網友回復：
感謝您添加 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)
})
uj5u.com熱心網友回復：
我可能會誤解，但為什么不直接將實體發送到一個單獨的函式，以便在它決議時可以訪問它？
$(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 > * </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>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/418578.html
標籤：