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 ...
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 Click vào nút này thì phương thức alert("Hello") sẽ được thực thi sau 5 giây.
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)
Đ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()
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>
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>
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()
var tên-biến = setTimeout(function, milliseconds); clearTimeout(tên-biến);
<button type="button" onclick="start = setTimeout(abc, 4000);">Start</button>
<button type="button" onclick="clearTimeout(start)">Stop</button>
<script>
function abc(){
alert("Hello");
}
</script>
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.
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
<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()
var tên-biến = setInterval(function, milliseconds); clearInterval(tên-biến);
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);
