Phương thức setTimeout() và setInterval() trong JavaScript


Bạn có bao giờ tự đặt ra câu hỏi "Làm thế nào để thiết lập thời gian thực thi của một hàm" !?

Nếu có, thì bài hướng dẫn này sẽ cung cấp cho bạn đầy đủ những kiến thức để giải đáp thắc mắc xoay quanh vấn đề trên.

Phương thức setTimeout()

Phương thức setTimeout() dùng để thiết lập một hàm nào đó  sẽ được thực thi  sau một khoảng thời gian xác định.

Ví dụ, khi người dùng thì phương thức alert("Hello") sẽ được thực thi sau 5 giây.

Cú pháp:
setTimeout(function, milliseconds);

Trong đó:

  • function là chức năng mà bạn muốn thực thi
  • Sau khoảng thời gian milliseconds thì function sẽ được thực thi (Lưu ý: 1000 milliseconds = 1 giây)
Ví dụ 1:

Đoạn mã bên dưới có chức năng: khi ta bấm vào Button thì hàm abc sẽ được thực thi sau 3 giây

<button type="button" onclick="setTimeout(abc, 3000)">Click</button>
<script>
    function abc(){
        alert("Hello");
    }
</script>

Lưu ý: Khi gọi đến tên hàm muốn thực thi, tuyệt đối KHÔNG thêm cặp dấu ()
Điển hình là ở đoạn mã trên, tôi gọi abc chứ không phải là abc()

Ví dụ 2:

Tương tự ví dụ 1: khi ta bấm vào Button thì phương thức alert('Hello') sẽ được thực thi sau 3 giây
Tuy nhiên ở ví dụ này: tôi không gọi đến tên hàm, mà viết thẳng hàm vào tham số thứ nhất luôn


<button type="button" onclick="setTimeout(function(){alert('Hello')}, 3000)">Click</button>
Xem ví dụ
Ví dụ 3 (tham khảo):

Làm cho phương thức setTimeout() thực thi nhiều lần bằng cách gọi lại tên hàm.


<button type="button" onclick="rePlay()">Click here</button>
<script>
    var x = 1;
    function rePlay(){
        document.getElementById("demo").innerHTML = x++;
        setTimeout(rePlay, 1000);
    }
</script>
Xem ví dụ
Ví dụ 4 (tham khảo):

Làm cho phương thức setTimeout() thực thi nhiều lần bằng cách sử dụng vòng lập.


<button type="button" onclick="rePlay()">Click here</button>
<script>
    var x = 1;
    function rePlay(){
        for(var i = 1; i <= 10; i++){
            setTimeout(abc, 1000*i);
        }
    }
    function abc(){
        document.getElementById("demo").innerHTML = x++;
    }
</script>
Xem ví dụ

Phương thức clearTimeout()

Phương thức clearTimeout() dùng để kết thúc việc thực thi của hàm được thiết lập trong phương thức setTimeout()

Cú pháp:

var tên-biến = setTimeout(function, milliseconds);
clearTimeout(tên-biến);
Ví dụ 1:

<button type="button" onclick="start = setTimeout(abc, 4000);">Start</button>
<button type="button" onclick="clearTimeout(start)">Stop</button>
<script>
    function abc(){
         alert("Hello");
    }
</script>
Xem ví dụ
Ví dụ 2 (tham khảo):

Chúng ta sẽ làm lại ví dụ 3 trong phần Phương thức setTimeout()
Tuy nhiên, khi màn hình hiển thị đến số 10 thì sẽ dừng lại


<button type="button" onclick="rePlay()">Click here</button>
<script>
    var x = 1;
    function rePlay(){
        document.getElementById("demo").innerHTML = x++;
        var y = setTimeout(rePlay, 1000);
        if(x == 11){
            clearTimeout(y);
        }
    }
</script>
Xem ví dụ

Phương thức setInterval()

Phương thức setInterval() dùng để thiết lập một hàm nào đó  sẽ được thực thi  sau một khoảng thời gian xác định và hành động này được lập lại mãi mãi.

Cú pháp:
setInterval(function, milliseconds);

Trong đó:

  • function là chức năng mà bạn muốn thực thi.
  • milliseconds là khoảng thời gian giữa mỗi lần function được thực thi
Ví dụ:

<script>
    setInterval(displayTime, 1000);
    function displayTime(){
        var d = new Date();
        document.getElementById("demo").innerHTML = d.toLocaleTimeString();
    }
</script>
Xem ví dụ

Phương thức clearInterval()

Phương thức clearInterval() dùng để kết thúc việc thực thi lập lại của hàm được thiết lập trong phương thức setInterval()

Cú pháp:

var tên-biến = setInterval(function, milliseconds);
clearInterval(tên-biến);
Ví dụ:

Chúng ta sẽ sử dụng lại ví dụ trong phần Phương thức setInterval()
Nhưng thêm vào đó một nút để kết thúc việc cập nhật thời gian


<button type="button" onclick="clearInterval(start)">Dừng lại</button>
<script>
    var start = setInterval(displayTime, 1000);
        function displayTime(){
        var d = new Date();
        document.getElementById("demo").innerHTML = d.toLocaleTimeString();
    }
</script>
Xem ví dụ

Lưu ý

Các phương thức setTimeout(), clearTimeout(), setInterval(), clearInterval() có thể CÓ hoặc KHÔNG CÓ tiền tố window

Ví dụ, hai câu lệnh dưới đây là hoàn toàn có chức năng như nhau:

  • setTimeout(function(){alert("Hello")}, 2000);
  • window.setTimeout(function(){alert("Hello")}, 2000);