每次點擊我在js中做一個回圈，但是當我點擊next時第一個回圈仍在運行，最后在同一個id上有一個雙回圈，我如何停止第一個回圈并用下一個回圈替換它？
這是一個用于創建聊天的程式，所以當我點擊人 A 時，會出現與人 A 的聊天，但是現在如果我點擊人 A 和 B 會發生什么，ID 會在人 A 和人 B 之間交替顯示聊天。
檔案.js
var base_url = window.location.origin '/' window.location.pathname.split('/')[1] '/';
$(document).ready(function() {
list()
})
function list() {
setTimeout(function() {
$.ajax({
method: "GET",
url: base_url 'admin/pesan/get_list',
dataType: "JSON",
success: function(data) {
$('#list_chat').empty()
// console.log(data[0].date_add)
$.each(data, function(i, data) {
var temp = null
var nama = null
var id = null
if (data.nama_pengirim == 'Admin') {
nama = data.nama_penerima
id = data.id_penerima
} else {
nama = data.nama_pengirim
id = data.id_pengirim
}
// console.log(id)
if (temp != nama) {
$('#list_chat').append(
`<div class="d-flex flex-row mb-1 border-bottom pb-3 mb-3">
<a class="d-flex klik_perusahaan" href="#" data-id="` id `">
<img alt="Profile Picture" src="` base_url `assets/template/img/profile-pic-l.jpg" class="img-thumbnail border-0 rounded-circle mr-3 list-thumbnail align-self-center xsmall">
</a>
<div class="d-flex flex-grow-1 min-width-zero">
<div class="pl-0 align-self-center d-flex flex-column flex-lg-row justify-content-between min-width-zero">
<div class="min-width-zero">
<a href="#" data-id="` id `">
<p class=" mb-0 truncate">` data.badan_hukum `. ` nama `</p>
</a>
<p class="mb-1 text-muted text-small">` new Date(data.date_add).getHours() ":" new Date(data.date_add).getMinutes() `</p>
</div>
</div>
</div>
</div>`
)
}
});
}
});
list();
}, 1000);
}
$('#firstFull').on('click', '.klik_perusahaan', function() {
var id = $(this).data('id')
show_pesan(id)
})
function show_pesan(id) {
setTimeout(function() {
console.log(id)
$.ajax({
type: "post",
dataType: "json",
url: base_url 'admin/pesan/get_pesan',
data: { 'id': id },
success: function(data) {
var nama = null
if (data[0].nama_pengirim == 'Admin') {
nama = data[0].nama_penerima
} else {
nama = data[0].nama_pengirim
}
$('.chat-app').empty()
$('.chat-app').append(
`<div class="d-flex flex-row justify-content-between mb-3 chat-heading-container">
<div class="d-flex flex-row chat-heading">
<a class="d-flex" href="#">
<img alt="Profile Picture" src="` base_url `assets/template/img/profile-pic-l.jpg" class="img-thumbnail border-0 rounded-circle ml-0 mr-4 list-thumbnail align-self-center small">
</a>
<div class=" d-flex min-width-zero">
<div class="card-body pl-0 align-self-center d-flex flex-column flex-lg-row justify-content-between min-width-zero">
<div class="min-width-zero">
<a href="#">
<p class="list-item-heading mb-1 truncate ">` data[0].badan_hukum `. ` nama `</p>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="separator mb-5"></div>`
)
$.each(data, function(i, data) {
if (data.id_pengirim != 'Admin') {
$('.chat-app').append(
`<div class="card d-inline-block mb-3 float-left mr-2">
<div class="position-absolute pt-1 pr-2 r-0">
<span class="text-extra-small text-muted white">09:30</span>
</div>
<div class="card-body" style="background-color:grey; border-radius:10px !important">
<div class="d-flex flex-row pb-2">
<a class="d-flex" href="#">
<img alt="Profile Picture" src="` base_url `assets/template/img/profile-pic-l.jpg" class="img-thumbnail border-0 rounded-circle mr-3 list-thumbnail align-self-center xsmall">
</a>
<div class="d-flex flex-grow-1 min-width-zero">
<div class="m-2 pl-0 align-self-center d-flex flex-column flex-lg-row justify-content-between min-width-zero">
<div class="min-width-zero">
<p class="mb-0 truncate list-item-heading white">` data.badan_hukum `. ` nama `</p>
</div>
</div>
</div>
</div>
<div class="chat-text-left">
<p class="mb-0 text-semi-muted white">` data.pesan `</p>
</div>
</div>
</div>
<div class="clearfix"></div>`
)
} else {
$('.chat-app').append(
`<div class="card d-inline-block mb-3 float-right mr-2">
<div class="position-absolute pt-1 pr-2 r-0">
<span class="text-extra-small text-muted">09:41</span>
</div>
<div class="card-body">
<div class="d-flex flex-row pb-2">
<a class="d-flex" href="#">
<img alt="Profile Picture" src="` base_url `assets/template/img/profile-pic-l-4.jpg" class="img-thumbnail border-0 rounded-circle mr-3 list-thumbnail align-self-center xsmall">
</a>
<div class="d-flex flex-grow-1 min-width-zero">
<div class="m-2 pl-0 align-self-center d-flex flex-column flex-lg-row justify-content-between min-width-zero">
<div class="min-width-zero">
<p class="mb-0 list-item-heading truncate">Admin</p>
</div>
</div>
</div>
</div>
<div class="chat-text-left">
<p class="mb-0 text-semi-muted">` data.pesan `</p>
</div>
</div>
</div>
<div class="clearfix"></div>`
)
}
$('.chat-app').append(
`<div class="clearfix"></div>
</div>
</div>`
)
});
}
})
show_pesan(id)
}, 1000)
}
視圖.html
<main>
<div class="container-fluid">
<div class="row app-row">
<div class="col-12 chat-app" id="show_chat">
</div>
</div>
</div>
<div class="app-menu">
<ul class="nav nav-tabs card-header-tabs ml-0 mr-0 mb-1" role="tablist">
<li class="nav-item w-50 text-center">
<a class="nav-link active" id="first-tab" data-toggle="tab" href="#firstFull" role="tab" aria-selected="true">Messages</a>
</li>
<li class="nav-item w-50 text-center">
<a class="nav-link" id="second-tab" data-toggle="tab" href="#secondFull" role="tab" aria-selected="false">Contacts</a>
</li>
</ul>
<div class="p-4 h-100">
<div class="form-group">
<input type="text" class="form-control rounded" placeholder="Search">
</div>
<div class="tab-content h-100">
<div class="tab-pane fade show active h-100" id="firstFull" role="tabpanel" aria-labelledby="first-tab">
<div class="scroll" id="list_chat"></div>
</div>
<div class="tab-pane fade h-100" id="secondFull" role="tabpanel" aria-labelledby="second-tab">
<div class="scroll">
<?php foreach ($kontak as $data) : ?>
<div class="d-flex flex-row mb-3 border-bottom pb-3">
<a class="d-flex" href="#">
<img alt="Profile Picture" src="<?= base_url() ?>assets/template/img/profile-pic-l.jpg" class="img-thumbnail border-0 rounded-circle mr-3 list-thumbnail align-self-center xsmall">
</a>
<div class="d-flex flex-grow-1 min-width-zero">
<div class="m-2 pl-0 align-self-center d-flex flex-column flex-lg-row justify-content-between min-width-zero">
<div class="min-width-zero">
<a href="#">
<p class="mb-0 truncate"><?= $data['badan_hukum'] . '. ' . $data['nama_perusahaan']; ?></p>
</a>
</div>
</div>
</div>
</div>
<?php endforeach ?>
</div>
</div>
</div>
</div>
<a class="app-menu-button d-inline-block d-xl-none" href="#">
<i class="simple-icon-options"></i>
</a>
</div>
<div class="chat-input-container d-flex justify-content-between align-items-center">
<input class="form-control flex-grow-1" type="text" placeholder="Say something...">
<div>
<button type="button" class="btn btn-outline-primary icon-button large">
<i class="simple-icon-paper-clip"></i>
</button>
<button type="button" class="btn btn-primary icon-button large">
<i class="simple-icon-arrow-right"></i>
</button>
</div>
</div>
</main>
<?php $this->load->view('template/footer') ?>
uj5u.com熱心網友回復：
每次新建settimeout之前需要全域記錄一個settimeout id
每次
先判斷是否存在舊的
如果存在則清除舊的再創建新的
希望對你有幫助
uj5u.com熱心網友回復：
我通過在第一個回圈中添加全域變數來找到解決方案
檔案.js
var z = 0
var id = null
$('#firstFull').on('click', '.klik_perusahaan', function() {
id = $(this).data('id')
reload()
})
function reload() {
if (z == 0) {
show_pesan(id)
z = 1
} else {
z = 0
}
}
function show_pesan(id) {
setTimeout(function() {
if (z == 1) {
show_pesan(id)
} else {
return reload()
}
}, 100)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/480963.html
標籤：javascript html jQuery 阿贾克斯 循环