'how to stop the first click loop after click next run
every click I do a loop in js, but when I click next the first loop is still running, finally there is a double loop on the same id, how do I stop the first loop and replace it with the next loop?
This is a program for creating chats, so when I click on person A, a chat with person A appears, but now what happens if I click on person A and B, the ID to display the chat alternately between Person A and Person B.
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') ?>
Solution 1:[1]
You need to record a settimeout id globally
before you create a new settimeout each time
first determine if an old one exists
If so, clear the old one before creating a new one
I hope this will help you
Solution 2:[2]
I found out media devices on remote connections over HTTP are disabled, HTTPS is required.
navigator.mediaDevices is undefined
How to access Camera and Microphone in Chrome without HTTPS?
To test my remotely deployed code accessing it from my machine, I have temporarily added an exception on chrome allowing media devices over the insecure connection for the specific IP address and port. That solved my issue regarding testing the app. A long-term solution would be to install a certificate on my app and have it accessed securely over HTTPS.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | AmelloAster |
| Solution 2 | Vergil C. |