Bagaimanakah Saya Boleh Menghentikan Gelung `setTimeout` atau `setInterval` dalam JavaScript?

Menghentikan gelung setTimeout

Apabila membina penunjuk pemuatan menggunakan sprite, pendekatan biasa melibatkan penggunaan fungsi untuk menetapkan kedudukan latar belakang penunjuk. Untuk mencipta gelung berterusan, kod tersebut menggunakan secara rekursif menggunakan fungsi dalam panggilan balik setTimeout. Walau bagaimanapun, mungkin tiba satu tahap di mana anda perlu menghentikan gelung ini setelah menyelesaikan tindakan tertentu.

Satu penyelesaian adalah untuk mendapatkan semula pemegang pemasa yang dikembalikan oleh setTimeout dan menggunakannya dengan clearTimeout untuk menamatkan gelung. Berikut ialah versi kod yang diubah suai yang melaksanakan pendekatan ini:

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 to stop the loop

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

Untuk menggunakan kod ini, anda boleh memanggil setBgPosition() dan menyimpan fungsi yang dikembalikan (berhenti) dalam pembolehubah:

var stop = setBgPosition();

Apabila anda perlu menghentikan gelung, cuma panggil fungsi henti:

stop();

Sebagai alternatif, anda boleh gunakan setInterval dan bukannya setTimeout. setInterval secara automatik mengulangi fungsi yang ditentukan pada selang waktu tertentu. Berikut ialah contoh menggunakan setInterval:

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

Dalam senario ini, kod di bawah akan menghentikan gelung:

var timer = setBgPosition();
clearInterval(timer);

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