在我的網站上，我有一個帶有一些“添加”鏈接的表格。通過單擊添加鏈接，將觸發一個 ajax 請求，并且 - 一旦執行此請求 - 在“添加”鏈接行正下方創建一個新表行。
一次僅單擊一個“添加”鏈接時，腳本按預期作業。
但是，get 請求呼叫的腳本的執行時間約為 2 秒。所以它可能會發生，請求并行運行。
如果我在第一個仍在加載時單擊第二個“添加”鏈接，則兩個新行都將添加到第二個表格行的下方。另一方面，當第二個仍在加載時單擊第一個“添加”鏈接時，兩個新行都將添加到第一個表格行的下方。（所以在兩個添加鏈接之間）。
這不是我想要的行為：我期待，當單擊兩個“添加”鏈接時，我會在每一行之后得到一個新行。
我想這可能會發生，因為在第一個回應仍在運行時加載第二個回應時變數“click”被覆寫了？我怎樣才能防止這種行為？
$('a.open').bind('click', function () {
id=$(this).attr('id');
click=$(this);
$.get("#", {key:id})
.done(function( data ) {
text=data.html;
click.closest('tr').after('<tr><td></td><td>' text '</td></tr>');
})
.fail(function (jqXHR, textStatus) {
click.closest('tr').after('<tr><td></td><td>error</td></tr>');
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border=1>
<tr>
<td><a href="#" id="12333" class="open">add</a></td>
<td>some text</td>
</tr>
<tr>
<td><a href="#" id="23457" class="open">add</a></td>
<td>some other text</td>
</tr>
</table>uj5u.com熱心網友回復：
問題確實是在 AJAX 呼叫完成之前id和click值被覆寫了。
發生這種情況是因為您沒有使用 variable 關鍵字，例如var，let或const宣告您的變數。因此id和click將作為屬性分配給window物件。window.id您可以通過在函式內部登錄來測驗它。
顯示代碼片段
$('a.open').on('click', function() {
id = $(this).attr('id');
console.log(window.id);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border=1>
<tr>
<td><a href="#" id="12333" class="open">add</a></td>
<td>some text</td>
</tr>
<tr>
<td><a href="#" id="23457" class="open">add</a></td>
<td>some other text</td>
</tr>
</table>您可以使用constor解決此問題let。兩者都是塊范圍的區域變數，這意味著它們只存在于它們所在的范圍內。在這種情況下，它們只存在于function() { ... }處理您的點擊事件的范圍內。
var也可以，但我建議查看前兩個，因為它們允許對范圍進行更多控制。
$('a.open').on('click', function() {
const id = $(this).attr('id');
const click = $(this);
setTimeout(function() {
click.closest('tr').after('<tr><td></td><td>Foobar</td></tr>');
}, 3000);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border=1>
<tr>
<td><a href="#" id="12333" class="open">add</a></td>
<td>some text</td>
</tr>
<tr>
<td><a href="#" id="23457" class="open">add</a></td>
<td>some other text</td>
</tr>
</table>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/427845.html
標籤：javascript jQuery 异步