{"id":5712,"date":"2024-08-29T03:28:17","date_gmt":"2024-08-29T03:28:17","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/planifier-script-en-javascript-settimeout-setinterval\/"},"modified":"2024-08-29T03:28:19","modified_gmt":"2024-08-29T03:28:19","slug":"planifier-script-en-javascript-settimeout-setinterval","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/planifier-script-en-javascript-settimeout-setinterval\/","title":{"rendered":"14.6 Planifier Script en JavaScript : setTimeout, setInterval"},"content":{"rendered":"\n<p><strong>Planifier Script JavaScript: Ex\u00e9cution de scripts en JavaScript<\/strong> est une comp\u00e9tence essentielle pour tout d\u00e9veloppeur web. Les m\u00e9thodes <code>setTimeout<\/code> et <code>setInterval<\/code> jouent un r\u00f4le crucial pour la gestion des t\u00e2ches asynchrones en JavaScript. Comprendre comment utiliser ces fonctions vous permettra d&rsquo;am\u00e9liorer consid\u00e9rablement l&rsquo;interactivit\u00e9 et la performance de vos applications web. Apprenons comment elles fonctionnent et comment les impl\u00e9menter gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 <strong>setTimeout<\/strong> et <strong>setInterval<\/strong><\/h2>\n\n\n\n<div id=\"tutorialVideoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/www.youtube.com\/embed\/o1IaduQICO0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"youtubePlayer\"><\/iframe>\n<\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('youtubePlayer');\n    var player = new YT.Player(iframe);\n    var isTutorialPopupDisplayed = false;\n\n    player.addEventListener('onStateChange', function(event) {\n        if (event.data == YT.PlayerState.PLAYING && !isTutorialPopupDisplayed) {\n            setTimeout(function(){\n                player.pauseVideo();\n                displayTutorialPopup();\n                isTutorialPopupDisplayed = true;\n            }, 120000); \/\/ 2 minutes\n        }\n    });\n\n    function displayTutorialPopup() {\n        \/\/ Here you can add logic to display a popup.\n    }\n\n    function closeTutorialPopup() {\n        \/\/ Logic to close the popup and resume the video\n    }\n});\n<\/script>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/658894284?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p><code>setTimeout<\/code> et <code>setInterval<\/code> sont des m\u00e9thodes JavaScript utilis\u00e9es pour ex\u00e9cuter du code apr\u00e8s un d\u00e9lai sp\u00e9cifi\u00e9 ou de mani\u00e8re r\u00e9p\u00e9t\u00e9e respectivement. <code>setTimeout<\/code> permet de planifier l&rsquo;ex\u00e9cution d&rsquo;une fonction une seule fois apr\u00e8s une p\u00e9riode donn\u00e9e, tandis que <code>setInterval<\/code> ex\u00e9cute une fonction r\u00e9p\u00e9titivement \u00e0 un intervalle de temps sp\u00e9cifi\u00e9.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser <code>setTimeout<\/code> pour Diff\u00e9rer l&rsquo;Ex\u00e9cution<\/h3>\n\n\n\n<p>La fonction <code>setTimeout<\/code> prend en entr\u00e9e une fonction et un d\u00e9lai en millisecondes. Elle ex\u00e9cute la fonction apr\u00e8s le d\u00e9lai sp\u00e9cifi\u00e9 :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function sayHello() {\n    console.log('Hello, world!');\n}\n\n\/\/ Ex\u00e9cuter la fonction apr\u00e8s 2000 millisecondes (2 secondes)\nsetTimeout(sayHello, 2000);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser <code>setInterval<\/code> pour R\u00e9p\u00e9ter une T\u00e2che<\/h3>\n\n\n\n<p><code>setInterval<\/code> fonctionne de mani\u00e8re similaire \u00e0 <code>setTimeout<\/code>, mais elle ex\u00e9cute la fonction de mani\u00e8re r\u00e9p\u00e9t\u00e9e \u00e0 intervalles r\u00e9guliers :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function displayTime() {\n    console.log('Current time: ' + new Date().toLocaleTimeString());\n}\n\n\/\/ Ex\u00e9cuter la fonction toutes les 1000 millisecondes (1 seconde)\nsetInterval(displayTime, 1000);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Annuler les T\u00e2ches Planifi\u00e9es avec <code>clearTimeout<\/code> et <code>clearInterval<\/code><\/h3>\n\n\n\n<p>Vous pouvez annuler une t\u00e2che planifi\u00e9e \u00e0 l&rsquo;aide de <code>clearTimeout<\/code> ou <code>clearInterval<\/code>. Ces fonctions prennent en argument le timer renvoy\u00e9 par <code>setTimeout<\/code> ou <code>setInterval<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Planifier une t\u00e2che\nlet timeoutId = setTimeout(function() {\n    console.log('This will not be logged');\n}, 5000);\n\n\/\/ Annuler la t\u00e2che planifi\u00e9e\nclearTimeout(timeoutId);\n\n\/\/ Planifier une t\u00e2che r\u00e9p\u00e9t\u00e9e\nlet intervalId = setInterval(function() {\n    console.log('This will not be logged after clearInterval is called');\n}, 1000);\n\n\/\/ Annuler la t\u00e2che r\u00e9p\u00e9t\u00e9e\nclearInterval(intervalId);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Gestion des T\u00e2ches Asynchrones Complexes avec <code>setTimeout<\/code> et <code>setInterval<\/code><\/h3>\n\n\n\n<p>Vous pouvez \u00e9galement utiliser ces fonctions pour g\u00e9rer des t\u00e2ches asynchrones plus complexes. Par exemple, pour cr\u00e9er une animation ou pour effectuer des requ\u00eates p\u00e9riodiques \u00e0 un serveur :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function startAnimation() {\n    let element = document.getElementById('movingElement');\n    let position = 0;\n    let increment = 1;\n\n    function move() {\n        position += increment;\n        element.style.left = position + 'px';\n\n        if (position >= 100 || position <= 0) {\n            increment = -increment; \/\/ Inverser le mouvement\n        }\n\n        timeoutId = setTimeout(move, 10);\n    }\n\n    move();\n}\n\n\/\/ Commencer l'animation\nstartAnimation();\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">R\u00e9aliser une Animation Simple avec <code>setTimeout<\/code><\/h3>\n\n\n\n<p>Utilisons <code>setTimeout<\/code> pour cr\u00e9er une animation simple qui d\u00e9place un \u00e9l\u00e9ment sur la page :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>document.addEventListener('DOMContentLoaded', function() {\n    const element = document.getElementById('animate');\n    let position = 0;\n\n    function animate() {\n        position += 1;\n        element.style.left = position + 'px';\n\n        if (position < 200) {\n            setTimeout(animate, 10);\n        }\n    }\n\n    animate();\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser <code>setInterval<\/code> pour Mettre \u00e0 Jour une Interface de Fa\u00e7on R\u00e9currente<\/h3>\n\n\n\n<p>Pour des mises \u00e0 jour r\u00e9currentes de l'interface utilisateur, <code>setInterval<\/code> est plus appropriate. Par exemple, pour afficher une horloge en temps r\u00e9el :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>document.addEventListener('DOMContentLoaded', function() {\n    const clock = document.getElementById('clock');\n\n    function updateClock() {\n        clock.textContent = new Date().toLocaleTimeString();\n    }\n\n    setInterval(updateClock, 1000); \/\/ Mise \u00e0 jour chaque seconde\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s d'Utilisation de <code>setTimeout<\/code> et <code>setInterval<\/code><\/h3>\n\n\n\n<p>Pour vous permettre d'approfondir l'usage de <code>setTimeout<\/code> et <code>setInterval<\/code>, voici quelques exemples avanc\u00e9s d'utilisation.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Planifier des Requ\u00eates HTTP R\u00e9p\u00e9t\u00e9es<\/h4>\n\n\n\n<p>Vous pouvez utiliser <code>setInterval<\/code> pour effectuer des requ\u00eates HTTP r\u00e9p\u00e9t\u00e9es \u00e0 un serveur afin de r\u00e9cup\u00e9rer des donn\u00e9es p\u00e9riodiquement :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function fetchData() {\n    fetch('https:\/\/api.example.com\/data')\n        .then(response => response.json())\n        .then(data => {\n            console.log('Data fetched:', data);\n        })\n        .catch(error => console.error('Error fetching data:', error));\n}\n\n\/\/ R\u00e9cup\u00e9rer les donn\u00e9es toutes les 5 secondes\nsetInterval(fetchData, 5000);\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Cr\u00e9ation d'un Diaporama avec <code>setTimeout<\/code><\/h4>\n\n\n\n<p>Cr\u00e9er un diaporama d'images avec des d\u00e9lais entre chaque changement d'image :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];\nlet currentIndex = 0;\n\nfunction showNextImage() {\n    const imgElement = document.getElementById('slideshowImage');\n    imgElement.src = images[currentIndex];\n    currentIndex = (currentIndex + 1) % images.length;\n    setTimeout(showNextImage, 3000); \/\/ Changer d'image toutes les 3 secondes\n}\n\ndocument.addEventListener('DOMContentLoaded', function() {\n    showNextImage();\n});\n<\/code><\/pre>\n\n\n\n<p>En poursuivant votre exploration des m\u00e9thodes <code>setTimeout<\/code> et <code>setInterval<\/code>, vous pouvez \u00e9galement consulter des ressources externes pour \u00e9largir votre compr\u00e9hension. Par exemple, le guide de <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/WindowOrWorkerGlobalScope\/setTimeout\" target=\"_blank\" rel=\"noopener\">MDN Web Docs<\/a> sur <code>setTimeout<\/code> et <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/WindowOrWorkerGlobalScope\/setInterval\" target=\"_blank\" rel=\"noopener\">MDN Web Docs<\/a> sur <code>setInterval<\/code> offrent une couverture exhaustive des usages et des meilleurs pratiques. Vous pouvez \u00e9galement suivre des cours en ligne sur des plateformes comme <a href=\"https:\/\/www.udemy.com\/\" target=\"_blank\" rel=\"noopener\">Udemy<\/a> pour un apprentissage structur\u00e9.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Int\u00e9gration de <code>setTimeout<\/code> et <code>setInterval<\/code> avec d'autres Fonctions<\/h3>\n\n\n\n<p>L'utilisation efficace de <code>setTimeout<\/code> et <code>setInterval<\/code> n'est qu'une partie de l'histoire du travail asynchrone en JavaScript. Par exemple, vous pouvez combiner ces fonctions avec des <a href=\"https:\/\/wikiform.fr\/codespace\/fonctions-interessantes-pour-le-dom-en-javascript\" target=\"_blank\" rel=\"noopener\">fonctions int\u00e9ressantes pour le DOM en JavaScript<\/a> pour ajouter ou modifier des \u00e9l\u00e9ments du DOM de mani\u00e8re r\u00e9p\u00e9t\u00e9e, ou encore utiliser des callbacks pour effectuer des op\u00e9rations apr\u00e8s la fin des minuteries.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Ex\u00e9cution R\u00e9currente pour Mettre \u00e0 Jour des","protected":false},"excerpt":{"rendered":"<p>Planifier Script JavaScript: Ex\u00e9cution de scripts en JavaScript est une comp\u00e9tence essentielle pour tout d\u00e9veloppeur web. Les m\u00e9thodes setTimeout et setInterval jouent un r\u00f4le crucial&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5712","post","type-post","status-publish","format-standard","hentry","category-4-javascript","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5712","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5712"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5712\/revisions"}],"predecessor-version":[{"id":5713,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5712\/revisions\/5713"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5712"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5712"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5712"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}