#settimeout

There are two functions that browsers expose to the JavaScript environment for asynchronously executing functions after a a specified amount of time in milliseconds: window.setTimeout and window.setInterval. Timeouts occur once, intervals repeat. However, JavaScript is single-threaded (with the exception of Web Workers) and so if a timer is set, but then the process blocks, the callback can be delayed or even fail to ever be fired.

The thread within which the JavaScript interpreter runs is also shared by the browser's UI and rendering systems. This means that not only will the above message never be logged, but that the browser will be unresponsive and appear to be frozen to the user.

It is possible to set so many timers expiring at about the same time that they just keep queuing up one after another; never giving the browser's UI a moment to update. I am going to refer to this as "timer congestion". I first read about this phenomena in Nicholas C. Zakas' book High Performance JavaScript (HPJS from now on). It was mentioned only in passing, however I found the idea fascinating. HPJS refers to research conducted by Neil Thomas while he was working on the mobile version of GMail.

Neil shared his research and the process that led him to do that research in his article Using Timers Effectively.

Introducing Chronos

Chronos is an implementation of the techniques described above which also mirrors the HTML 5 WindowTimers interface.

interface WindowTimers {  long setTimeout(in any handler, in optional any timeout, in any... args);  void clearTimeout(in long handle);  long setInterval(in any handler, in optional any timeout, in any... args);  void clearInterval(in long handle); };

This means that to switch existing code from using window.setTimout and friends, all you need to do is include Chronos on the page and replace window.setTimeout with chronos.setTimeout, etc to take advantage of what Chronos has to offer.

References

Using Timers Effectively by Neil Thomas

High Performance JavaScript by Nicholas C. Zakas

WHATWG HTML 5 Specification for Timers

How JavaScript Timers Work by John Resig

Understanding JavaScript Timers by Angus Croll

In JavaScript, for a novice, if a parallel flow of execution is required, every programmer resorts to

setTimeout(<handlerReference>)

But is it just a parallel flow of execution or Multi-Threading ? Let’s find out :)

Copy and paste the following function in your html file, execute it in your browser console :-

function main() {    setTimeout(function() {

   for(var j=0; j<1000; j++)    {      console.log("for loop inside setTimeout - 1");    }  }, 4);

 setTimeout(function() {

   for(var j=0; j<1000; j++)    {      console.log("for loop inside setTimeout - 2");    }  }, 2);

 for(var i=0; i<1000; i++)  {     console.log("for loop inside main");  } }

When you execute the main() function. What do you see ??

First the ‘for loop inside main’ message is printed 1000 times, and only then ‘for loop inside setTimeout - 2’ and ‘for loop inside setTimeout - 1’  is printed, even though the setTimeout was given for after 2 milliseconds only and 4 milliseconds only, respectively.

Also, first the ‘for loop inside setTimeout - 2’ is printed instead of ‘for loop inside setTimeout - 1’

Conclusion

TypeScript – Recursive XMLHttpRequest (XHR) Call on a Sliding Interval

Recursive XHR Call on a Sliding Interval

Preparing a demo for my talk titled “A Practical Overview of Actors in Service Fabric“, that was given at MSDEVMTL and that will be given at DevTeach 2016, I use TypeScript poll a REST API for new messages.

This experiment helped me understand => in TypeScript. Since I lost a few cycles trying to figure this out, I decided to share an example. (more…)

こんにちは。SHUNです。

for関数内でsetTimeoutを渡す際、ローカル変数を引数として渡す方法をまとめました。

ダメな例

var arr = ["test1","test2","test3"]; for(var i=0;i<arr.length;i++){ setTimeout(function(){ alert(arr[i]); },i*1000); };

arrに入っているテキストを1秒おきにalertで表示させる例ですが、iというローカル変数は、上記の書き方ではsetTimeoutで使うことはできません。 「undefined」とアラート表示されてしまうと思います。

クロージャを用いる方法

そこで、一般的な方法として、クロージャを用いて引数を渡す方法があります。

var arr = ["test1","test2","test3"]; for(var i=0;i<arr.length;i++){ (function(count){ //countという変数にiを挿入 setTimeout(function(){ alert(arr[count]); },i*1000); })(i); };

これで正常にarrの中身が1秒おきにアラート表示されるようになります。

setTimeoutの第３引数を用いる方法（非推奨）

下記のように、setTimeout関数の最後の位置にパラメータを追加し、functionの引数として受け取ることが可能です。

var arr = ["test1","test2","test3"]; for(var i=0;i<arr.length;i++){ setTimeout(function(count){ //countという変数名で受け取る alert(arr[count]); },i*1000,i); //第３引数にiをセット };

しかしながら、IE9以下は非対応のため、使用する際は注意する必要がありそうです。

参考：WindowTimers.setTimeout()

SetTimeOut es una función interesante que nos permite hacer una llamada a una función transcurrido un número concreto de segundos. Para utilizar SetTimeOut solo tenemos que escribir una sentencia como esta:

function talk(str){ alert(str); } setTimeout("talk('Hello')", 5000);

Los parámetros de la misma son dos, en primer lugar la función que se debe llamar, y en segundo el número de segundos que debe tardar en llamarla, en este caso llamara la función talk() en cinco segundos. El problema que hoy queremos presentar, se presenta cuando intentamos utilizar setTimeOut desde dentro de un 'objeto' para llamar a uno de los métodos del mismo. De manera que tendríamos un código como este

setTimeout(this.talk('Hello'), 5000);

Esto no funcionará, ya que en javascript no existen clases como tales. Después de buscar y rebuscar por internet encontré este artículo, que me ofrecía la siguiente solución.

setTimeout(function(thisObj) { thisObj.talk('hola'); }, 5000, this);

Estamos pasando como parámetro opcional de SetTimeOut nuestro objeto para poder interactuar con el dentro de la propia función. Sinembargo mirando los comentarios nos damos cuenta que esta solución no es valida para Internet Explorer, y nos proponen la siguiente solución:

thisObj = this; setTimeout(function() { thisObj.talk('Hola'); }, 50);

setTimeoutの動きがよくわからなかったのでまとめ。 関数宣言でも関数式でも結果は動きは変わらない。 大体4パターンの動きをする。

正しく実行される

var st = "'string'"; var it = 5; setTimeout("f("+st+","+it+")",1000); setTimeout("f('str',4)",1000); setTimeout(function(){rewriteG1(st,it);},1000); setTimeout(f,1000); //引数なしの関数ならこれでも動く

すぐに実行される

setTimeout(f("string"),1000);

引数が正しく渡せない

setTimeout("f(x)",1000); //id="x"の要素がある場合 HTML Objが渡される

実行されない

Ajax settimeout to read status from php/mysql

I am trying to get Ajaz to pull data from mysql using a php file every 5 seconds and the process continues. It seems to work great in firefox but does not update in IE.

Can anyone help make this platform independent?

Ajax/Jquery Code

function startprogress() { $.get("status.php"); setTimeout('updateStatus()', 500); } function updateStatus() { $("#progress").load("status.php");…