{"id":244,"date":"2008-09-16T18:07:17","date_gmt":"2008-09-16T17:07:17","guid":{"rendered":"http:\/\/nyams.planbweb.com\/blog\/?p=244"},"modified":"2008-09-16T18:07:17","modified_gmt":"2008-09-16T17:07:17","slug":"utilisation-pratique-de-settimeout-et-setinterval","status":"publish","type":"post","link":"https:\/\/nyamsprod.com\/blog\/utilisation-pratique-de-settimeout-et-setinterval\/","title":{"rendered":"utilisation pratique de setTimeout et setInterval"},"content":{"rendered":"<div class=\"message warning\">\n<p><strong>Attention:<\/strong> Les informations de ce billet sont susceptibles d'&ecirc;tre obsol&egrave;tes car vieux de plus 2 ans.<\/p>\n<p><strong>Warning: <\/strong> The information you are reading may be obsolete, this post was published more than 2 years ago.<\/p>\n<\/div><p>En javascript, comme dans tous les langages de script et\/ou de programmation, il existe des fonctions plus &#8220;puissantes&#8221; que d&#8217;autres et dont <a title=\"Eval c'est le mal\" href=\"http:\/\/ejohn.org\/blog\/eval-kerfuffle\/\">l&#8217;utilisation doit \u00eatre faite avec beaucoup de pr\u00e9cautions<\/a>. Deux de ces fonctions dont la puissance et\/ou la mauvaise utilisation peuvent aboutir \u00e0 un crash de votre navigateur sont <code>setTimeout<\/code> et <code>setInterval<\/code>. <!--more-->C&#8217;est pourquoi \u00e0 chaque nouvelle mouture de la langue, les concepteurs des diff\u00e9rents navigateurs essaient d&#8217;en contr\u00f4ler voire d&#8217;en diminuer les effets n\u00e9fastes possibles.<\/p>\n<p>R\u00e9cemment j&#8217;ai du coder un effet de carrousel pour un site. Le code n&#8217;est d&#8217;ailleurs pas totalement fini, mais l\u00e0 n&#8217;est pas le propos. Afin de cr\u00e9er l&#8217;illusion de carrousel, j&#8217;ai eu recours \u00e0 la fonction <code>setTimeout<\/code> et pour l&#8217;utiliser comme il se doit, j&#8217;ai eu recours \u00e0 la documentation du <a title=\"setTimeout tel que implant\u00e9 sous Firefox, Safari et Opera\" href=\"http:\/\/developer.mozilla.org\/fr\/DOM\/window.setTimeout\">Mozilla Developper Center<\/a>. Selon cette documentation <code>setTimeout<\/code> comme <code>setInterval<\/code> peuvent prendre jusqu&#8217;\u00e0 255 arguments dont :<\/p>\n<ul>\n<li> le nom d&#8217;une fonction ou une cha\u00eene de caract\u00e8res, \u00e9valu\u00e9e en javascript via la fonction <code>eval<\/code>, comme 1er argument ;<\/li>\n<li>le temps minimum qui doit s&#8217;\u00e9couler entre 2 appels \u00e0 la fonction, comme 2\u00e8me argument ;<\/li>\n<li>une liste d&#8217;arguments qui seront automatiquement appel\u00e9s par la fonction indiqu\u00e9e dans le premier argument.<\/li>\n<\/ul>\n<p>De fait mon appel \u00e0 setTimeout ressemblait \u00e0 ceux-l\u00e0 :<\/p>\n<pre id=\"line1\"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">var animate = function() {\n    var x;\n    return function (o, start, stop, dist) {\n        o.style.left = start;\n        if( stop &gt; start ){\n            start += dist;\n            x = setTimeout(arguments.callee, interval, o, start , stop, dist );\n        } else {\n            clearTimeout(x);\n        }\n    };\n}();\n\/*\narguments.callee repr\u00e9sente l&#039;appel r\u00e9cursif \u00e0 la fonction animate \no repr\u00e9sente l&#039;objet DOM auquel j&#039;applique le &quot;mouvement&quot;\nstart la position qu&#039;il doit prendre\ninterval le temps qui s&#039;\u00e9coule entre 2 appels \u00e0 la fonction\nstop la position finale\ndist la distance a parcourir entre chaque appel \u00e0 la fonction\n*\/<\/pre>\n<p>Tout fonctionnait tr\u00e8s bien sous Firefox, Safari et Opera, mais lorsque j&#8217;ai du finalement tester le code sous Internet Explorer, tada, surprise \ud83d\ude42 , mon code ne fonctionnait plus. N&#8217;arrivant pas \u00e0 savoir pourquoi, apr\u00e8s avoir essayer de corriger mon code sans succ\u00e8s, j&#8217;ai d\u00e9cid\u00e9 de consulter <a title=\"setTimeout tel que implant\u00e9 sous Internet Explorer\" href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/ms536753.aspx\">la documentation fournie par Microsoft de <code>setTimeout<\/code><\/a> et que vois-je ? les fonctions <code>setInterval<\/code> comme <code>setTimeout<\/code> ne peuvent prendre que 3 param\u00e8tres, sous Internet Explorer. <strong>le troisi\u00e8me argument indiquant si on est en Jscript, en VBscript ou en Javascript.<\/strong> La seule mani\u00e8re de r\u00e9soudre mon probl\u00e8me a donc \u00e9t\u00e9 d&#8217;utiliser les <em>closures<\/em> et de rendre toutes mes variables globales. Bref beaucoup de concept dont on ce serait bien pass\u00e9, ce qui me donne la solution suivante :<\/p>\n<pre id=\"line1\"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">var animate = function (){\n    var o, start, stop, dist, x;\n    var _animate = function() {\n        o.style.left = start;\n        if( stop &gt; start ){\n            start += dist;\n            x = setTimeout(arguments.callee, interval);\n        } else {\n            clearTimeout(x);\n        }\n    };\n    return function(el, begin, end, delta){\n        o = el;\n        start = end;\n        dist = delta;\n        _animate();\n    };\n}();<\/pre>\n<p>Aux developpeurs de IE8, essayez de corriger le tir car plus personne n&#8217;utilise Jscript ou VBscript sur le net. Et cela nous permettra, \u00e0 nous, d\u00e9veloppeurs de ne pas avoir \u00e0 recourir a des solutions qui alourdissent inutilement le code et le rende rapidement illisible \ud83d\ude09 . en \u00e9crivant ce poste je suis tomb\u00e9 <a title=\"Comment r\u00e9soudre le probl\u00e8me avec des commentaires conditionnels\" href=\"http:\/\/webreflection.blogspot.com\/2007\/06\/simple-settimeout-setinterval-extra.html\">sur cette solution<\/a> mais vu que je ne l&#8217;ai pas encore test\u00e9, je vous laisse juge de son efficacit\u00e9.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>setTimeout et setInterval on \u00e9voluaient dans leur syntaxe et dans leur implantation mais, h\u00e9las, tous les navigateurs actuels ne comprennent pas leur nouvelle syntaxe. Comment faire alors, pour utiliser ces fonctions quelque soit le navigateur rencontr\u00e9.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[5],"tags":[46,107,178,196,286,292,404,471,479,480],"class_list":["post-244","post","type-post","status-publish","format-standard","hentry","category-web","tag-astuce","tag-closures","tag-eval","tag-firefox","tag-internet-explorer","tag-javascript","tag-opera","tag-safari","tag-setinterval","tag-settimeout"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts\/244","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/comments?post=244"}],"version-history":[{"count":0,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts\/244\/revisions"}],"wp:attachment":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/media?parent=244"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/categories?post=244"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/tags?post=244"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}