ກົນທີ່ Window setInterval()

  • ຫນ້າທີ່ຫຼັງ self
  • ຫນ້າທີ່ໜ້າ setTimeout()
  • ກັບຄືນຖານະສູງສຸດ Window Object

ການສະເພາະນິຍົມແລະການນໍາໃຊ້

setInterval() ກົນທີ່ການເອິ້ນວິກິຢູ່ຕະຫຼອດຈົນກວ່າເວລາທີ່ກຳນົດໄວ້ທີ່ມີຈຳນວນມັນນາທີ.

setInterval() ກົນທີ່ການດຳເນີນຄັນຈະເປັນການຂັ້ນຕອນກັບການເອິ້ນວິກິຢູ່ຕະຫຼອດຈົນກວ່າ clearInterval() ຫຼືປິດປ່ອງປະຕູ.

ຄວາມຄິດເຫັນ:1 ວັນນາທີ = 1000 ມັນນາທີ.

ຄຳແນະນຳ

ສຳລັບການດຳເນີນຄັນພຽງຫຼັງຄັນດຽວຫຼັງນັ້ນທີ່ setTimeout() ກົນທີ່.

ສຳລັບການຖອນການຕັ້ງເວລາອອກພຽງຢ່າງນັ້ນທີ່ setInterval() ID ທີ່ກັບມາ:

myInterval = setInterval(function, milliseconds);

ຫຼັງຈາກນັ້ນທ່ານສາມາດເອິ້ນ clearInterval() ເພື່ອຢຸດການດຳເນີນ:

clearInterval(myInterval);

ອີງຕາມ:

ກົນທີ່ clearInterval()

ກົນທີ່ setTimeout()

ກົນທີ່ clearTimeout()

ຕົວຢ່າງ

ຕົວຢ່າງ 1

ການສະແດງ "Hello" (1000 ມັນນາທີ):

setInterval(function () {element.innerHTML += "Hello"}, 1000);

ທົດລອງຄວາມສາມາດຂອງເຈົ້າ

ຕົວຢ່າງ 2

ການເອິ້ນ displayHello ໃນແຕ່ລະວັນຈຸລາຍວັນ.

setInterval(displayHello, 1000);

ທົດລອງຄວາມສາມາດຂອງເຈົ້າ

ມີຫຼັກການຕົວຢ່າງຫຼາຍຫຼັງບາງເບື້ອງລຸ່ມ.

ຄຳສັບພາສາ

setInterval(function, milliseconds, param1, param2, ...)

ຄວາມເປັນປະສົມ

ຄວາມເປັນປະສົມ ອະທິບາຍ
function ຈຳເປັນ. ກົນທີ່ຈະດຳເນີນ.
milliseconds

ຈຳເປັນ. ການດຳເນີນຄັນກັບການຂັ້ນຕອນ.

ຖ້າຄຳຕອບຍັງຕໍ່າ 10 ນັ້ນໃຊ້ 10.
param1, param2, ...

ທົດສະນະ. ການສົ່ງອະສຕິກຳຕື່ມເພື່ອຕໍ່ຕອນ.

IE9 ແລະຫຼັງຈາກນັ້ນບໍ່ສະໜັບສະໜູນ.

ຄຳຕອບກັບ

ປະເພດ ອະທິບາຍ
ໂຕກະຊວງ

ID ຂອງເວລາຕັ້ງ.

ກະລຸນາຕິດຕາມ id ນີ້ clearInterval() ນຳໃຊ້ພຽງຢ່າງນັ້ນເພື່ອຖອນເວລາຕັ້ງ.

ບັນດາບັນຊີສະໜັບສະໜູນ

ທຸກບັນດາບັນຊີບໍ່ພົບ setInterval()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
ສະໜັບສະໜູນ: ສະໜັບສະໜູນ: ສະໜັບສະໜູນ: ສະໜັບສະໜູນ: ສະໜັບສະໜູນ: ສະໜັບສະໜູນ:

ຕົວຢ່າງຫຼາຍອີກ:

ຕົວຢ່າງ 3

ສະແດງເວລາຄືເປັນເວລາເປັນເວລາທີ່ເປັນເວລາ:

setInterval(myTimer, 1000);
function myTimer() {
  const date = new Date();
document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}

ທົດລອງຄວາມສາມາດຂອງເຈົ້າ

ຕົວຢ່າງ 4

ຢຸດການເບິ່ງພາຍໃນເວລາດ້ວຍ clearInterval():

const myInterval = setInterval(myTimer, 1000);
function myTimer() {
  const date = new Date();
  document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}
function myStopFunction() {
  clearInterval(myInterval);
}

ທົດລອງຄວາມສາມາດຂອງເຈົ້າ

ຕົວຢ່າງ 5

ສ້າງຕາກິດຄະແນນການເຄື່ອນຍ້າຍດ້ວຍ setInterval() ແລະ clearInterval():

function move() {
  const element = document.getElementById("myBar");
  let width = 0;
  let id = setInterval(frame, 10);
  function frame() {
    if (width == 100) {
      clearInterval(id);
    } else {
      width++;
      element.style.width = width + '%';
    }
  }
}

ທົດລອງຄວາມສາມາດຂອງເຈົ້າ

ຕົວຢ່າງ 6

ປ່ຽນສະແດງສຳພັນສະໜາມສີທີ່ສອງຫນັງໃນເວລາ 500 ວິນາທີ:

const myInterval = setInterval(setColor, 500);
function setColor() {
  let x = document.body;
  x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
}
function stopColor() {
  clearInterval(myInterval);
}

ທົດລອງຄວາມສາມາດຂອງເຈົ້າ

ຕົວຢ່າງ 7

ສົ່ງຄຳມາຄວາມຄິດເຫັນໃຫ້ຫົວຫອດ (ບໍ່ມີຜົນງານໃນ IE9 ແລະກ່ອນຫນັງ):

setInterval(myFunc, 2000, "param1", "param2");

ທົດລອງຄວາມສາມາດຂອງເຈົ້າ

ແຕ່ວ່າຖ້າເຈົ້າໃຊ້ພາສາບົດປະຈຳວັນນະຍຸດຫຼັງການບັນທຶກຄວາມຄິດເຫັນຂອງພວກເຈົ້າໃຫ້ໃຊ້ໃນທຸກບຸກຄອນທຸກຕົວເລື່ອງ:

setInterval(function() {myFunc("param1", "param2")}, 2000);

ທົດລອງຄວາມສາມາດຂອງເຈົ້າ

  • ຫນ້າທີ່ຫຼັງ self
  • ຫນ້າທີ່ໜ້າ setTimeout()
  • ກັບຄືນຖານະສູງສຸດ Window Object