setInterval setTimeout in JavaScript - ProgrammerTech
Language:

Search

setInterval setTimeout in JavaScript

  • Share this:
setInterval setTimeout in JavaScript

setInterval period in javascript

The setInterval period in JavaScript during which we can repeat the execution of the commands that we specify, this is what we call scheduling a call.

setInterval(If we want to run Function){
	/commands
},);

There are two scheduling functions that are used:

  1. setTimeout This method only runs the function once after a period of time.
  2. setInterval The function is run recursively, iterating starts after a period of time and iterates over the period you specified.

Example 1

We will dial a pop-up window that appears automatically every three seconds. We will change the background first from the html file.

<body style= "background: salmon;">

In the javascript file we write.

setInterval(function test(){
	alert("Programmer Tech") ;
},3000);

The result of this process is a pop-up dialer that appears every three seconds, and the number 3000 means three seconds, meaning every 1000 means one second.

 

Using the setInterval period within functions

Example 2

function test(){
	alert("Programmer Tech") ;
}
setInterval(test,3000);

We created a function named test and then put print commands to it via alert. And in the end we wrote the method setInterval and in the parentheses we defined the function and wrote the number of seconds is 3 and the result will be as in the first example.

asfjj-1.webp

 

This popup will keep popping up every 3 seconds.

 

Stop looping by clearInterval javascript

We use clearInterval in order to stop iterating in the program when we use the iterator via setInterval.

Example 3

We create a button in the html file and use the onclick property with it.

<button id="stop" onclick="stopInterval">turning off</button>

in javascript.

function test(){
	alert("Programmer Tech");
} 
var myInterval = setInterval(test,3000);
function stopInterval(){
	clearInterval(myInterval);
}

We created a variable named myInterval to associate it with the commands and created a function named stopInterval and ran the stop function via clearInterval . Here the loop will stay on until the stop button is pressed until it stops working.

 

Using setInterVal with classes

Example 4

class MyPage{
	constructor(){
		var myInterval = setInterVal()(=>{
			this.testInterVal();
		},3000);
	}
	testInterVal(){
		alert("Works");
	}
}
onload = new MyPage();

We created a class called MyPage and a constructor, and then we created a variable within the constructor called myInterval and set the number of seconds for commands to run, which is 3 seconds. And we gave the launch a pop-up window with the word “work” and this method is more secure, and we ran this class via onload and the results will be the same as the previous ones.

 

Timeout setTimeout in javascript

setTimeout is used to give a timer or a timeout for executing commands and to set a timeout to a few seconds or minutes from opening the page to the next page or other commands.

The general form of writing setTimeout javascript

setTimeout(run function or method, number of seconds);

 

Using setTimeout within functions

function tech(){
	alert("test");
}
setTimeout(tech,4000);

We have created a function called tech and the data will be displayed via alert, and the word “test” will appear in it. And we set the execution of commands only once after four seconds. The command will only run once and stop unlike setInterval.

 

Stop execution of commands by clearTimeout

To stop the execution of commands before they are executed we use clearTimeout as we will see in the following example.

function tech(){
	alert("test");
}
var timeOut = setTimeout(tech,4000);
clearTimeout(timeOut);

We have created a function called tech and the data will be displayed via alert, and the word “test” will appear in it. We set the command to execute only once after four seconds, and then stop the execution with clearTimeout. This way the commands won't work because we stopped them with the clearTimeout command. Let's do the same as the previous command, but through the button, and when you press it, it stops the process through the onclick feature.

<button onclick="clearTimeOut()">Click to delete</button>

in the javascript file

function tech(){
	alert("test");
}
var timeOut = setTimeout(tech,4000);
function clearTimeOut(){
	clearTimeout(timeOut);
}

When this button is pressed, orders will not be executed at all, because we have placed orders. When pressed, the orders will not work.

 

Using setTimeout within classes

class MyPage{
	constructor(){
		var myTimeOut = setTimeout(()=>{
			this.testTimeOut();
		},4000);
	} 
testTimeOut(){
	alert("working properly");
    }
}
onload = new MyPage();

The setTimeout feature acts as a timer to execute the commands placed in it and executes the commands only once after the specified time. And it does not repeat, that is, unlike setInterval, which keeps repeating commands according to the period set for it to infinity.


Muhammad Alush

Muhammad Alush

إسمي محمد تركي العلوش من سورية من ريف حلب الشرقي 1994, محب للتقنية و التعلم الذاتي, و جميع خبراتي تعلمتها ذاتياً, و اللغات البرمجية التي أتقنها هي html, css, javascript, php, c, python بالإضافة إلى حبي الكبير لمجال الشبكات.

موقعي programmer-tech.com