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 to add definition lists into a <dl> element?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
}
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://CoursesWeb.net/");
}
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
setTimeout and this in class function in JavaScript

Last accessed pages

  1. HTTP Errors and Logging (39)
  2. Add, Change, and Remove Attributes with jQuery (35999)
  3. Select in MySQL, Output results in HTML Table (3789)
  4. jQuery Drag and Drop Rows between two similar Tables (6875)
  5. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (8371)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (443)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (351)
  3. Register and show online users and visitors (319)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (300)
  5. Insert, Select and Update NULL value in MySQL (214)