Bagaimana untuk Menghentikan Gelung `setTimeout` atau `setInterval` dalam JavaScript?

Menghentikan gelung setTimeout

Dalam kod yang disediakan, gelung setTimeout digunakan untuk terus menetapkan kedudukan latar belakang sprite imej, mencipta animasi memuatkan. Walau bagaimanapun, adalah perlu untuk mengawal apabila gelung dihentikan sebaik sahaja pemuatan selesai.

Penyelesaian melibatkan penggunaan pemegang pemasa yang dikembalikan oleh setTimeout. Pemegang ini boleh digunakan bersama dengan clearTimeout untuk menghentikan tamat masa.

function setBgPosition() {
    var c = 0,
        timer = 0;
    var numbers = [0, -120, -240, -360, -480, -600, -720];

    function run() {
        Ext.get('common-spinner').setStyle(
            'background-position',
            numbers[c++] + 'px 0px'
        );
        if (c >= numbers.length) {
            c = 0;
        }
        timer = setTimeout(run, 200);
    }

    timer = setTimeout(run, 200);

    return stop;

    function stop() {
        if (timer) {
            clearTimeout(timer);
            timer = 0;
        }
    }
}

Kod yang disemak ini mentakrifkan fungsi henti dalam setBgPosition. Fungsi berhenti menyemak sama ada pemegang pemasa hadir dan, jika ya, mengosongkannya dengan clearTimeout. Kod yang dikemas kini boleh digunakan seperti berikut:

var stop = setBgPosition();
// ...later, when you're ready to stop...
stop();

Sebagai alternatif, setInterval boleh digunakan dan bukannya setTimeout untuk mencipta gelung berulang. Walau bagaimanapun, setInterval memerlukan clearInterval untuk menghentikan gelung.

function setBgPosition() {
    var c = 0;
    var numbers = [0, -120, -240, -360, -480, -600, -720];

    function run() {
        Ext.get('common-spinner').setStyle(
            'background-position',
            numbers[c++] + 'px 0px'
        );
        if (c >= numbers.length) {
            c = 0;
        }
    }

    return setInterval(run, 200);
}

Kod ini boleh digunakan seperti berikut:

var timer = setBgPosition();
// ...later, when you're ready to stop...
clearInterval(timer);

Akhir sekali, disyorkan untuk mempertimbangkan menggunakan syarat dalam setBgPosition itu sendiri untuk mengesan selesai proses pemuatan dan menghentikan gelung secara automatik.

Atas ialah kandungan terperinci Bagaimana untuk Menghentikan Gelung `setTimeout` atau `setInterval` dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!