لقد تعلمت JS قبل بضعة أيام ورأيت وظيفتين مثيرتين للغاية ، وهما وظيفة setTimeout ووظيفة SetInterval. يمكن أن تجعل هاتان الوظيفتان صفحات الويب تأثيرات شائعة جدًا على صفحات الويب ، مثل Carousels Picture ، وبعض التأثيرات الممتعة للغاية. دعنا نتعرف على هاتين وظيفتين أدناه!
بناء الجملة وتطبيق وظيفة setTimeout ووظيفة setInterval
1. وظيفة settimeout
التعريف والاستخدام: يتم استخدام طريقة setTimeOut () لاستدعاء وظيفة أو حساب تعبير بعد العدد المحدد من المللي ثانية.
بناء الجملة: setTimeout (رمز ، ميليسيك) ؛
المعلمة:
الرمز (مطلوب): سلسلة رمز JavaScript التي سيتم تنفيذها بعد الدالة المراد استدعاؤها.
ميليسيك (مطلوب): عدد المللي ثانية للانتظار قبل تنفيذ الكود.
تَلمِيح:
SetTimeOut () ينفذ رمز مرة واحدة فقط. إذا كنت ترغب في الاتصال عدة مرات ، فاستخدم SetInterval () أو اطلب من الكود نفسه استدعاء SetTimeOut () مرة أخرى.
قيمة الإرجاع
قيمة يمكن تمريرها إلى Window.ClearTimeOut () لإلغاء التنفيذ الدوري للرمز.
نظرًا لأن SetTimeOut هي وظيفة مؤقت ، فهناك وظائف لتنظيف المؤقت ، لذلك نستخدم وظيفة ClearTimeout.
ClearTimeout (قيمة المعرف التي تم إرجاعها بواسطة setTimeOut ()) ؛
2. التعريف
تستدعي طريقة setInterval () وظيفة أو تحسب تعبيرًا وفقًا للفترة المحددة (بالميلي ثانية).
ستستدعي طريقة setInterval () الوظيفة بشكل مستمر حتى يتم استدعاء clearinterval () أو إغلاق النافذة. يمكن استخدام قيمة المعرف التي يتم إرجاعها بواسطة SetInterval () كمعلمة لطريقة ClearInterval ().
قواعد
setInterval (رمز ، millisec [، "lang"]) ؛
رمز المعلمة مطلوب. الوظيفة المراد استدعاؤها أو سلسلة الكود المراد تنفيذه.
يجب أن ميليسيك. الفاصل الزمني بين التنفيذ الدوري أو رمز الاتصال ، بالمللي ثانية
قيمة الإرجاع
قيمة يمكن تمريرها إلى Window.ClearInterval () لإلغاء التنفيذ الدوري للرمز.
نظرًا لأن SetTimeOut هي وظيفة مؤقت ، فهناك وظائف لتنظيف المؤقت ، لذلك نستخدم وظيفة ClearInterval ().
ClearInterval () (قيمة المعرف التي تم إرجاعها بواسطة setInterval ()) ؛
2. الحالة:
تأثير العد التنازلي
<! doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html ؛ طريقة JS لتحقيق تأثير العد التنازلي VAR T1 ؛ window.onload = function () {// 01 إلى زر البدء وإرجاع كائن dom var btns = document.getElementById ('btnstart') ؛ // 02. قم بتسجيل الحدث النقر على زر البدء btns.onclick = function () {// قم بتنفيذ الوظيفة التي تفيد بأن المعلمة الأولى لوظيفة setInterval يجب تنفيذها بانتظام ، والمعلمة الثانية هي الوظيفة التي تنفذ كل ميلي ثانية t1 = setInterval (ابدأ ، 1000) ؛ } // 03 موقف إلى زر STOP لإرجاع كائن DOM var btnst = document.getElementById ('btnstop') ؛ btnst.onclick = function () {clearinterval (t1) ؛ }} // الدالة المراد تنفيذها 1 وظيفة ثانية start () {// 01. احصل على النص في DIV لتعيينه إلى متغير var divdom = document.getElementById ('msg') ؛ var divnum = divdom.innertext ؛ // ادعى ما إذا كانت قيمة divnum هي 0 if (divnum> 0) {divnum-- ؛ // إعادة تعيين القيمة المخصصة لـ divnum divdom.innertext = divnum ؛ }} </script> </head> <body> <input type = "button" id = "btnstart" value = "start"/> <input type = "button" id = "btnstop" value = "stop"/> <br/> <div id = "msg"تبديل صورة الخلفية:
<! doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html ؛ 1 ؛ // حدد المتغير الأولي إلى الصورة الأولى بشكل افتراضي. } // الوظيفة المراد تنفيذها show () {// إذا وصلت الصورة إلى آخر (5 صور) ، قم بتغيير الصورة المعروضة التالية إلى الصورة الأولى. إذا لم يتم الوصول إلى الصورة الأخيرة ، فسيتم عرض الصورة التالية إذا (count> 5) {count = 1 ؛ } آخر {count ++ ؛ } // احصل على كائن DOM مع ID myimg var dom = document.getElementById ("myimg") ؛ // قم بتغيير إشارة سمة SRC إلى علامة IMG ، وقم بتغيير الصورة dom.src = "image/"+count+".اسم المتصل
<! doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html ؛ صفيف لحفظ البيانات الأساسية في بيانات namer var = ['Zhang San' ، 'Li Si' ، 'Wang er' ، 'Xiao Chen' ، 'Xiao Zhang'] ؛ var i = 0 ؛ // أعلن عن متغير أولي للسماح للشخص الأول بعرضه على الصفحة افتراضيًا var t1 ؛ window.onload = function () {// 02. احصل على كائن DOM الخاص بزر اسم البداية لتسجيل حدث النقر للكائن var dom = document.getElementById ("mybtn") ؛ dom.onclick = function () {// استخدم وظيفة setInterval لاستدعاء وظيفة النتيجة t1 = setInterval (start ، 500) ؛ // هذه الطريقة تستدعي فقط setTimeOut (STOP ، 6000) ؛ }. domh.innertext = data [i ٪ data.length] ؛ // استبدال ، قيمة العنصر i ++ ؛ } // استدعاء الوظيفة المجهولة start () ؛ var stop = function () {// مسح المؤقت clearinterval (t1) ؛ // الطلاب الذين ينقرون على مربع المطالبة ينبثق ويجيبون التنبيه ("من فضلك" + document.getElementById ("myh1"). innertext + "struction approw") ؛ }}} </script> </head> <body> <h1 id = "myh1"> </h1> <button id = "mybtn"من خلال الحالات المذكورة أعلاه ، أعتقد أن الجميع يجب أن يكونوا على دراية بهاتين وظيفتين.
المقالة أعلاه لها فهم عميق لوظيفة setTimeout ووظيفة SetInterval. هذه المقالة هي كل المحتوى الذي شاركته معك. آمل أن يعطيك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.