2a:null 2b:["$","title",null,{"children":"Introduction to JavaScript Callbacks | Steve Oney | Observable"}] 30:T77d,md` ## Timer Events ### Delayed Callback: \`setTimeout()\` and \`clearTimeout()\` We can specify that we want to run a given piece of code at a certain time in the future using [\`setTimeout()\`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), which accepts two arguments: - A function object that will be called when the time comes - Note that this is why it is important that JavaScript has first-class functions, as it allows us to pass a function as an argument - A number that represents the number of milliseconds (1 second is 1,000 milliseconds) until that function will be called For example, if we have a function named \`doSomething\`, we can call it in 5 seconds by running: \`\`\`JavaScript setTimeout(doSomething, 5000); \`\`\` It's also possible that before the 5 seconds elapses, we decide not to call \`doSomething\`. For example, suppose \`doSomething\` is a function that downloads a file (after a 5 second wait) but the user presses "cancel" before the 5 seconds is up. We can use [\`clearTimeout()\`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout) to cancel the call to \`setTimeout()\`. Whenever we call \`setTimeout()\`, it returns a unique ID that we can pass into \`clearTimeout()\`: \`\`\`JavaScript const timerID = setTimeout(doSomething, 5000); clearTimeout(timerID); // prevents doSomething from ever being called \`\`\`
`31:[{"id":"acbdc182c1ee39bb8e21bb411c1110d2e32d01310a8f7b47be80d6a11c2096111b3cd83645fcc7af72c2d599712ec5c7236c91b8632f90b5cc22ce092e45c501","href":"https://static.observableusercontent.com/files/acbdc182c1ee39bb8e21bb411c1110d2e32d01310a8f7b47be80d6a11c2096111b3cd83645fcc7af72c2d599712ec5c7236c91b8632f90b5cc22ce092e45c501","name":"06d9iyju5oy31.jpg","type":"image/jpeg","lastModified":1610564545145.98,"size":101085}] 2e:{"id":"0ddfe64df3fa5b3b","slug":"introduction-to-javascript-callbacks","title":"Introduction to JavaScript Callbacks","thumbnail":"c38245e2a86c95a9c7893ee7a9cf6f814256e6966b0f270b562d6e454bd68662","access_level":"public","create_time":"$D2020-12-30T20:09:01.141Z","update_time":"$D2023-10-02T17:43:36.920Z","view_time":null,"first_public_time":"$D2020-12-30T20:09:02.444Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"55b87b37da07de37","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":"starter_2024"},"version":125,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null}],"members":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"8fc582aae7c4b049","slug":"si-579","title":"Building Interactive Applications","owner":{"id":"55b87b37da07de37","login":"soney","name":"Steve Oney"}},"type":"notebook","body":{"title":"Introduction to JavaScript Callbacks","cells":[{"id":0,"value":"md`# Introduction to JavaScript Callbacks`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":114,"value":"toc();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"md`\n## First Class Functions\n\nJavaScript, like Python, treats functions as [\"first-class citizens\"](https://en.wikipedia.org/wiki/First-class_function), which means we can assign variables to function objects, pass functions as arguments to other functions, and use functions pretty much anywhere that we could use other data types.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"md`\n## What is a callback?\n\nThe fact that JavaScript functions are first-class is critical to its design. It means that we can pass functions in as arguments to other functions. We often use this with **callbacks**. Callbacks specify a piece of code to run after some event has taken place. For example, we might specify a callback that should run after the user has clicked a button.\n\n

\n\n## Why we use callback functions?\n\nTo make a given page interactive, we specify a callback for a given event to say \"when *this* happens, do *that*\". For example, \"when the user clicks a button, pop up a window\".\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":52,"value":"md`\n### Repeated Callback: \\`setInterval()\\` and \\`clearInterval()\\`\n\nThe [\\`setInterval()\\`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) and [\\`clearInterval()\\`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval) functions work analagously to \\`setTimeout()\\` and \\`clearTimeout()\\` except that they *repeatedly* call the function (the second argument to \\`setInterval()\\` specifies the delay between calls).\n\nHTML:\n\\`\\`\\`HTML\n\n\\`\\`\\`\n\nJavaScript:\n\\`\\`\\`JavaScript\nlet secondsElapsed = 0;\nfunction updateTimer() {\n secondsElapsed++;\n}\n\nfunction stopTimer() {\n clearInterval(intervalID);\n}\n\nconst intervalID = setInterval(updateTimer(), 1000);\n\\`\\`\\`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"md`\nReference List:\n* [JavaScript: What the heck is a Callback?](https://codeburst.io/javascript-what-the-heck-is-a-callback-aba4da2deced)\n* [JavaScript Timing Events](https://www.w3schools.com/js/js_timing.asp)\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":113,"value":"import {toc} from \"@harrystevens/toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2f:"$2e:body"