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, because it cannot be used with the special word this.


For example, in the following code, setTimeout() not works as we expect.
<h4>Example this in setTimeout()</h4>

<div id="swprop"></div>
<script>
// defines a class function
class className {
 constructor(){
 this.prop = 0;
 }

 // method
 metName() {
 document.getElementById('swprop').innerHTML = this.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 10
 this.prop++;
 if(this.prop < 10) setTimeout('this.metName()', 500);
 }
}

// creates an object of className, and accesses metName()
var objTest = new className();
objTest.metName();
</script>
If you test the above code with Chrome browser, in JavaScript Console will appear this error:
TypeError: this.metName is not a function
Which means the script looks for metName() in the Window object. The "this" we used in setTimeout() is scoping via itself.

Solution with the bind() method

The solution is to apply the bind(val) method, which has its this keyword set to the provided value (val).
- So, in setTimeout() use this syntax:

setTimeout(this.methodName.bind(this), milliseconds);

Applying this solution in the code above, the following example will work.
<h4>Example bind() method in setTimeout()</h4>

<div id="swprop"></div>
<script>
// defines a class function
class className {
 constructor(){
 this.prop = 0;
 }

 // method
 metName() {
 document.getElementById('swprop').innerHTML = this.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 10
 this.prop++;
 if(this.prop < 10) setTimeout(this.metName.bind(this), 500);
 }
}

// creates an object of className, and accesses metName()
var objTest = new className();
objTest.metName();
</script>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML5 tag is indicated to be used as container for menu with navigation links in Web site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Which CSS property shifts an item horizontally to the left or right of where it was?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Click on the Math object method which returns x, rounded downwards to the nearest integer.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicate the PHP function which returns the number of characters in string.
mb_strlen() count() stristr()
$str = "string with utf-8 chars åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 30
setTimeout and this with bind() method in JavaScript class

Last accessed pages

  1. Insert, Select and Update NULL value in MySQL (41034)
  2. $_GET, $_POST and $_REQUEST Variables (27414)
  3. Contact page - CoursesWeb (16164)
  4. Tabs effect with CSS (16860)
  5. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (22999)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1434)
  2. Tabs effect with CSS (1369)
  3. Contact page - CoursesWeb (1366)
  4. Insert, Select and Update NULL value in MySQL (791)
  5. PHP getElementById and getElementsByTagName (622)