مثال (متد setInterval)
ایجاد یک پیام Alert، در هر 3 ثانیه(3000 میلی ثانیه):
خودتان امتحان کنید »
در انتهای این صفحه، مثال های بیشتری آورده شده است.
تعریف و کاربرد
متد setInterval()، یک تابع را فراخوانی کرده یا یک عبارت را در یک فاصله زمانی(به میلی ثانیه) ارزیابی می کند.
متد setInterval()، فراخوانی یک تابع را ادامه می دهد تا هنگامی که clearInterval() فراخوانی شود یا اینکه پنجره بسته شود.
از ID برگردانده شده به وسیله ی setInterval()، بعنوان پارامتر برای متد clearInterval() استفاده می شود.
نکته: 1000 میلی ثانیه برابر با 1 ثانیه است.
نکته: برای یک بار اجرا کردن یک تابع، بعد از یک فاصله ی زمانی مشخص به میلی ثانیه، از متد setTimeout() استفاده کنید.
پشتیبانی مرورگرها
اعداد داخل جدول زیر نشان دهنده ی اولین ورژن مرورگری است که به طور کامل از این متد پشتیبانی می کند.
متد | |||||
---|---|---|---|---|---|
setInterval() | 1.0 | 4.0 | 1.0 | 1.0 | 4.0 |
نحوه استفاده
مقادیر پارامترها
پارامتر | توضیحات |
---|---|
function | ضروری. تابعی که قرار است اجرایی شود. |
milliseconds | ضروری. فاصله زمانی(به میلی ثانیه) که مشخص کننده ی زمان اجرای تابع است. |
param1,param2,... | اختیاری. پارامترهای اضافی برای استفاده در تابع.(در IE9 و ورژن های قبلی آن پشتیبانی نمی شود). |
جزئیات تکنیکی
مقدار برگشتی | یک عدد، که مشخص کننده ی مقدار ID تایمری است که ست شده است. از این مقدار در کنار clearInterval()، برای cancel کردن تایمر استفاده می شود. |
---|

مثال - خودتان امتحان کنید
مثال (متد setInterval)
شما همچنین می توانید به یک تابع نام گذاری شده رجوع کنید. نشان دادن Hello بعنوان یک پیام ، هر 3 ثانیه(3000 میلی ثانیه):
function myFunction() {
myVar = setInterval(alertFunc, 3000);
}
function alertFunc() {
alert("Hello!");
}
خودتان امتحان کنید »
مثال (متد setInterval)
نمایش دادن زمان کنونی(متد setInterval() تابع را هر یک ثانیه اجرا کرده، درست مانند یک ساعت دیجیتال):
function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = t;
}
خودتان امتحان کنید »
مثال (متد setInterval)
استفاده از clearInterval() برای متوقف کردن زمان، در مثال قبلی:
function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = t;
}
function myStopFunction() {
clearInterval(myVar);
}
خودتان امتحان کنید »
مثال (متد setInterval)
ایجاد یک تناوب برای دو رنگ پس زمینه، در هر 300 میلی ثانیه:
function setColor() {
var x = document.body;
x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
}
function stopColor() {
clearInterval(myVar);
}
خودتان امتحان کنید »
مثال (متد setInterval)
رد کردن پارامترها به تابع alertFunc (در IE9 و ورژن های قبلی آن پشتیبانی نمی شود):
function myStartFunction() {
myVar = setInterval(alertFunc, 2000, "First param", "Second param");
}
خودتان امتحان کنید »
اما در صورتی که شما از یک تابع بی نام استفاده کنید، در تمام مرورگرها کار می کند:
function myStartFunction() {
myVar = setInterval(function(){ alertFunc("First param", "Second param"); }, 2000);
}
خودتان امتحان کنید »
آموزش های مرتبط
کلیه توابع و خصوصیت های شیء Window در JavaScript
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
function myFunction() {
var myVar = setInterval(function(){
var date = new Date();
var gozashteh = Date.parse(date);
//تاریخی که در آینده است و فرا نرسیده است
var ayandeh = Date.parse("June 29, 2020 16:54:00:000");
if(gozashteh < ayandeh){
document.getElementById("demo").innerHTML = "زمان فرا نرسیده";
}else{
document.getElementById("demo").innerHTML = "زمان فرا رسیده است";
//دستوراتی که سر ساعت باید اجرا شوند
clearInterval(myVar);
}
}, 1000);
}
myFunction();
</script>
</body>
</html>
http://codepen.io/prv/pen/MwzpYg
http://uploadbaz.com/u13vpe55s38p
مشکل از اینجا ناشی می شد که شما کدهای اسکریپت رو به قسمت head منتقل کرده بودید و این باعث یک error می شد از این قرار که : عنصر با آی دی hd رو نمی شناخت. دقت نمایید که همواره کدهای اسکریپت خودتون رو به آخر عنصر body در صفحه منتقل کنید که هم باعث افزایش سرعت صفحه خواهد شد و هم از ایجاد چنین خطاهایی جلوگیری خواهد شد.
یک سوال که نمی دونم آیا مربوط به این بخش هست یا خیر
می خواهم یک متنی طی پنج ثانیه طوری که آرام آرام ظاهر بشه یعنی opacity یک ضرب 2 نشه
آیا با استفاده از این متد میشه یا خیر
با استفاده از انیمیشن های css به راحتی این کار قابل انجام است: codepen.io/sbaloot/pen/eNQvyz
تو جاوا اسکریپت این امکان وجود دارد که بعد از مدت یک چند ثانیه متنی ظاهر شود؟
یا یک عنصر وقتی به یک جای خواص برسد متن برای او ظاهر شود؟
آیا لودینگ ها هم با این دستور ساخته می شوند
می توانیم یک متن را ایجاد کنیم و مخفی کنیم و بعد از یک زمان خاص اون رو به نمایش در بیاوریم.
کار اصلی لودینگ ها اینه که وقتی صفحه کاملا بارگذاری شد صفحه را نمایش می دهند.
لودینگ ها از دستورات زیادی ایجاد می شوند و فقط یک دستور خاص نیست.
<!doctype html >
<html >
<head >
<meta charset="utf-8" >
<title >beyamooz</title >
</head >
<body >
<div id="text" >beyamooz</div >
<script >
var text=document.getElementById("text");
text.style.display="none";
setTimeout(function(){text.style.display="block"},2500);
</script >
</body >
</html >
ابتدا متن نمایش نمی یابد. بعد از چند ثانیه به نمایش درمی آید.
البته کد بالا دارای خطای تایپی است(به دلیل فنی این مشکل پیش میاد) می توانید این کد رو در یک ویرایشگر آنلاین به آدرس زیر مشاهده کنید: codepen.io/sbaloot/pen/KpeEOg
var n=document.getElementById("txt");
n.style.display="none";
setTimeout(function(){n.style.display="block"},2500);
Wellcome To This Site
لطفا در سایت زیر ثبت نام کنید و کد مورد نظرتون رو به طور کامل(به همراه دستورات html و css و جاوااسکریپت) در این ادیتور آنلاین ذخیره کنید، سپس لینک اون رو برای ما ارسال کنید. این طوری بهترمی توانیم شما را راهنمایی کنیم:
codepen.io
http://codepen.io/prv/pen/EjpxmZ
این لینک هست