استدعاء التابع عند الحدث settimeout();

يتم استدعاء التابع عند الحدث settimeout ويتم تحديد زمن لتكرار التابع
المثال التالي عبارة عن عداد متزايد
التابع يقوم بزيدادة المتحول xبمقدار واحد
يتم استدعاء التابع كل 1000 ميلي ثانية أي يتم تنفيذ عملية الزيادة بمقدارواحد كل 1000 ميلي ثانية وبالتالي يصبح العداد متزايد إلى اللانهاية

<!DOCTYPE html>
<html lang="en">
<head>
<title>timeout</title>
<style>
 
</style>
</head>
<body onload=" increment()">
<p id="show"></p>
<script>
var x=1;
function increment(){
  x++;
  document.getElementById("show").innerHTML=x;
  setTimeout( increment,1000);
 } 
</script>
</body>
</html>

نلاحظ أن البرنامج السابق يستمر في الزيادة دون توقف .. يمكن وضع شرط لتوقف التابع عن تنفيذ الزيادة وذلك باستخدام التعليمة if

function increment(){
  x++;
  document.getElementById("show").innerHTML=x;
if(x<100){
  setTimeout( increment,1000);
}
 }

في هذه الحالة سيستمر العد حتى العدد 100 ويتوقف بعدها التابع عن عمله.

لنقم بعمل إطار متحرك بنفس الطريقة السابقة :

يجب أولا أن نقوم بتحديد إطار له لون معين , ثم يتم الوصول إلى خاصية العرض للعنصر المراد تحريك إطاره وبنفس الطريقة السابقة نقوم بزيادة
أبعاد العنصر ولنفرض أننا نريد زيادة عرض العنصر

document.getElementById(&amp;quot;idname&amp;quot;).style.width=x+&amp;quot;px&amp;quot;;

حيث x هو المتغير الذي نقوم بزيادته أو إنقاصه
وبالتالي يصبح البرنامج على الشكل التالي

<!DOCTYPE html>
<html lang="en">
<head>
<title>timeout</title>
<style>
#show {border:1px solid red;}
</style>
</head>
<body onload="any()">
<div id="show">some paragraph</div>
<script>
var x=80;
function any(){
  x++;
  document.getElementById("show").style.width=x+"px";
  if(x<300){
  setTimeout(any,10);
  }
 }
</script>
</body>
</html>

وبنفس الطريقة يمكن تحريك العنصر عن طريق الارتفاع

  document.getElementById(&amp;quot;show&amp;quot;).style.height=x+&amp;quot;px&amp;quot;;

يمكن القيام بعملية معاكسة للعملية السابقة وهي تصغير العرض أو الارتفاع للعنصرعلى النحو التالي :

<!DOCTYPE html>
<html lang="en">
<head>
<title>timeout</title>
<style>
#show {border:1px solid red;}
</style>
</head>
<body onload="any()">
<div id="show">some paragraph</div>
<script>
var x=300;
function any(){
  x--;
  document.getElementById("show").style.height=x+"px";
  if(x>80){
  setTimeout(any,10);
  }
 }
</script>
</body>
</html>

مع الانتباه إلى شرط التوقف

لنقم الآن بحركة أكثر مرونة ووهي الأهم والأكثر استخداما :

وهي زيادة عرض العنصر وإنقاصة بشكل متواتر ومستمر , تتم هذه العملية من خلال استدعاء التابع لنفسه حتى الوصول إلى الحد الأعظمي المطلوب واستدعاء تابع آخر وهو تابع الإنقاص حتى الوصول إلى الحد الأصغري

<html>
<head>
<title>timeout</title>
<style>
#show {border:1px solid red;}
</style>
</head>
<body onload="increment()">
<div id="show">word</div>
<script>
var x=80;
 
function increment(){
  x++;
  document.getElementById("show").style.width=x+"px";
  if(x==300){
    setTimeout(decrement, 1);
  }
  else{
    setTimeout(increment, 1);
  }
}
 
function decrement(){
  x--;
  document.getElementById("show").style.width=x+"px";
  if(x==80){
    setTimeout(increment, 1);
  }
  else{
    setTimeout(decrement, 1);
  }
}
</script>
</body>
</html>