setTimeout() can be used to call a function after a specified time, and to auto-call a function multiple times, if it is added inside it. But, setTimeout() causes javascript to use the global scope, and this can be a problem when it is used inside a class function, because it cannot be used with the special word this.
For example, in the following code, setTimeout() not works as we expect.
<div id="swprop"></div>
<script type="text/javascript">
// defines a class function
var className = function() {
  // defines a property and a public method
  var prop = 0;
  this.method = function() {
    document.getElementById('swprop').innerHTML = prop;      // shows prop value in #swprop

    // adds one unit to prop to each call, and auto-calls this function every 0.5 sec., till prop reaches 5
    prop++;
    if(prop < 5) setTimeout('this.method()', 500);
  }
}

// creates an object of className, and accesses method()
var objTest = new className();
objTest.method();
</script>
If you test the above code with Chrome browser, in JavaScript Console will appear this error:
TypeError: Object [object Window] has no method 'method'
Which means the script looks for method() in the Window object. The "this" we used in setTimeOut is scoping via itself.

• The solution is to create a var variable_name = this; inside our class function, and use variable_name instead, because the "variable_name" will store the object contained in "this".

- Applying this solution in the code above, the following example will work.
<div id="swprop"></div>
<script type="text/javascript">
// defines a class function
var className = function() {
  var v_name = this;        // stores the object contained in 'this'

  // defines a property and a public method
  var prop = 0;
  this.method = function() {
    document.getElementById('swprop').innerHTML = prop;      // shows prop value in #swprop

    // adds one unit to prop to each call, and auto-calls this function every 0.5 sec., using 'v_name'
    prop++;
    if(prop < 5) setTimeout(v_name.method, 500);
  }
}

// creates an object of className, and accesses method()
var objTest = new className();
objTest.method();
</script>
Click the Demo button to see the result.

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used in <table> to create table header cell?
<thead> <th> <td>
<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>
Which CSS property sets the distance between lines?
line-height word-spacing margin
.some_class {
  line-height: 150%;
}
Which function opens a new browser window.
alert() confirm() open()
document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}
Indicate the PHP function that returns an array with names of the files and folders inside a directory.
mkdir() scandir() readdir()
$ar_dir = scandir("dir_name");
var_export($ar_dir);
setTimeout and this in class function in JavaScript

Last accessed pages

  1. PHP PDO - Select query, fetch (18654)
  2. PHP MySQL - INSERT INTO (9450)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (43599)
  4. Insert, Select and Update NULL value in MySQL (21003)
  5. Qwop (65499)

Popular pages this month

  1. Qwop (2997)
  2. Get Attribute (ID, Class, Name, Title, Src) with jQuery (2372)
  3. Get the value of the selected /checked checkboxes in a form (1497)
  4. Insert, Select and Update NULL value in MySQL (1341)
  5. Add, Change, and Remove Attributes with jQuery (1225)