how to stop the first click loop after click next run-CodePudding

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 >
                                <a  href="#" data-id="`   id   `">
                                    <img alt="Profile Picture" src="`   base_url   `assets/template/img/profile-pic-l.jpg" >
                                </a>
                                <div >
                                    <div >
                                        <div >
                                            <a href="#" data-id="`   id   `">
                                                <p >`   data.badan_hukum   `. `   nama   `</p>
                                            </a>
                                            <p >`   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 >
                        <div >
                            <a  href="#">
                                <img alt="Profile Picture" src="`   base_url   `assets/template/img/profile-pic-l.jpg" >
                            </a>
                            <div >
                                <div >
                                    <div >
                                        <a href="#">
                                            <p >`   data[0].badan_hukum   `. `   nama   `</p>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div ></div>`
                )
                $.each(data, function(i, data) {
                    if (data.id_pengirim != 'Admin') {
                        $('.chat-app').append(
                            `<div >
                                <div >
                                    <span >09:30</span>
                                </div>
                                <div  style="background-color:grey; border-radius:10px !important">
                                    <div >
                                        <a  href="#">
                                            <img alt="Profile Picture" src="`   base_url   `assets/template/img/profile-pic-l.jpg" >
                                        </a>
                                        <div >
                                            <div >
                                                <div >
                                                    <p >`   data.badan_hukum   `. `   nama   `</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
    
                                    <div >
                                        <p >`   data.pesan   `</p>
                                    </div>
                                </div>
                            </div>
                            <div ></div>`
                        )
                    } else {
                        $('.chat-app').append(
                            `<div >
                                <div >
                                    <span >09:41</span>
                                </div>
                                <div >
                                    <div >
                                        <a  href="#">
                                            <img alt="Profile Picture" src="`   base_url   `assets/template/img/profile-pic-l-4.jpg" >
                                        </a>
                                        <div >
                                            <div >
                                                <div >
                                                    <p >Admin</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
    
                                    <div >
                                        <p >`   data.pesan   `</p>
                                    </div>
                                </div>
                            </div>
                            <div ></div>`
                        )
                    }
                    $('.chat-app').append(
                        `<div ></div>
                        </div>
                        </div>`
                    )
                });
            }
        })
        show_pesan(id)
    }, 1000)
}

view.html

<main>
    <div >
        <div >
            <div  id="show_chat">

            </div>
        </div>
    </div>

    <div >
        <ul  role="tablist">
            <li >
                <a  id="first-tab" data-toggle="tab" href="#firstFull" role="tab" aria-selected="true">Messages</a>
            </li>
            <li >
                <a  id="second-tab" data-toggle="tab" href="#secondFull" role="tab" aria-selected="false">Contacts</a>
            </li>
        </ul>

        <div >
            <div >
                <input type="text"  placeholder="Search">
            </div>
            <div >
                <div  id="firstFull" role="tabpanel" aria-labelledby="first-tab">

                    <div  id="list_chat"></div>

                </div>

                <div  id="secondFull" role="tabpanel" aria-labelledby="second-tab">
                    <div >

                        <?php foreach ($kontak as $data) : ?>
                            <div >
                                <a  href="#">
                                    <img alt="Profile Picture" src="<?= base_url() ?>assets/template/img/profile-pic-l.jpg" >
                                </a>
                                <div >
                                    <div >
                                        <div >
                                            <a href="#">
                                                <p ><?= $data['badan_hukum'] . '. ' . $data['nama_perusahaan']; ?></p>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach ?>

                    </div>
                </div>
            </div>
        </div>

        <a  href="#">
            <i ></i>
        </a>
    </div>

    <div >
        <input  type="text" placeholder="Say something...">
        <div>
            <button type="button" >
                <i ></i>
            </button>
            <button type="button" >
                <i ></i>
            </button>

        </div>
    </div>
</main>

<?php $this->load->view('template/footer') ?>

CodePudding user response：

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

CodePudding user response：

i found solution by adding global variable for check in first loop

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)
}