每次点击我做一个循环在js，但当我点击下一步的第一个循环仍在运行，最后有一个双循环在相同的id，我如何停止第一个循环，并将其替换为下一个循环?
这是一个创建聊天的程序，所以当我点击人a时，出现了与人a的聊天，但现在如果我点击人a和人B，会发生什么呢，在人a和人B之间交替显示聊天的ID
file.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)
}
view.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') ?>
你需要全局记录一个settimeout id
在你每次创建一个新的settimeout之前
首先确定一个旧的是否存在
如果存在，在创建一个新的之前清除旧的
我希望这对你有帮助
通过在第一个循环中添加检查的全局变量找到了解决方案
file.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)
}