Phương thức hàm setTimeout() và setInterval() trong Javascript, cách thiết lập thời gian thực thi cho hàm trong JavaScript

Phương thức hàm setTimeout() và setInterval() trong Javascript, cách thiết lập thời gian thực thi cho hàm trong JavaScript

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

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

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>

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>

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

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

Click giùm một cái QUẢNG CÁO để hỗ trợ duy trì website, các bạn ơi