[{"data":1,"prerenderedAt":763},["ShallowReactive",2],{"doc-content/docs/developer/timer":3,"doc-surroundings/docs/developer/timer":670,"docs-navigation":679},{"path":4,"draft":5,"date":6,"dateUpdated":7,"title":8,"body":9,"description":669,"image":6,"imageAlt":6},"/docs/developer/timer",false,null,"2025-05-15","Timer",{"type":10,"value":11,"toc":662},"minimark",[12,16,20,28,31,135,141,144,209,215,218,283,289,292,303,306,309,435,439,446,453,658],[13,14,8],"h1",{"id":15},"timer",[17,18,19],"p",{},"Hologram's timer class lets you run code at specific times.",[21,22,24],"h2",{"id":23},"everysecondwidget-cb",[25,26,27],"code",{},"everySecond(widget, cb)",[17,29,30],{},"Runs the specified callback every second.",[32,33,38],"pre",{"className":34,"code":35,"language":36,"meta":37,"style":37},"language-js shiki shiki-themes github-dark github-dark","const timerId = Hologram.timer.everySecond(this, () => {\n    // This will be called every second\n    console.log('Hello!')\n})\n\n// Stop the timer by running\nHologram.removeListener(timerId)\n","js","",[25,39,40,79,86,104,110,117,123],{"__ignoreMap":37},[41,42,45,49,53,56,60,64,67,70,73,76],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sOPea","const",[41,50,52],{"class":51},"s8ozJ"," timerId",[41,54,55],{"class":47}," =",[41,57,59],{"class":58},"suv1-"," Hologram.timer.",[41,61,63],{"class":62},"sFR8T","everySecond",[41,65,66],{"class":58},"(",[41,68,69],{"class":51},"this",[41,71,72],{"class":58},", () ",[41,74,75],{"class":47},"=>",[41,77,78],{"class":58}," {\n",[41,80,82],{"class":43,"line":81},2,[41,83,85],{"class":84},"sJ8bj","    // This will be called every second\n",[41,87,89,92,95,97,101],{"class":43,"line":88},3,[41,90,91],{"class":58},"    console.",[41,93,94],{"class":62},"log",[41,96,66],{"class":58},[41,98,100],{"class":99},"s4wv1","'Hello!'",[41,102,103],{"class":58},")\n",[41,105,107],{"class":43,"line":106},4,[41,108,109],{"class":58},"})\n",[41,111,113],{"class":43,"line":112},5,[41,114,116],{"emptyLinePlaceholder":115},true,"\n",[41,118,120],{"class":43,"line":119},6,[41,121,122],{"class":84},"// Stop the timer by running\n",[41,124,126,129,132],{"class":43,"line":125},7,[41,127,128],{"class":58},"Hologram.",[41,130,131],{"class":62},"removeListener",[41,133,134],{"class":58},"(timerId)\n",[21,136,138],{"id":137},"everyminutewidget-cb",[25,139,140],{},"everyMinute(widget, cb)",[17,142,143],{},"Runs the specified callback once per minute when the minute changes. This should be used to update clocks and other things that need to update exactly when the minute increments.",[32,145,147],{"className":34,"code":146,"language":36,"meta":37,"style":37},"const timerId = Hologram.timer.everyMinute(this, () => {\n    // This will be called every minute\n    console.log('Hello!')\n})\n\n// Stop the timer by running\nHologram.removeListener(timerId)\n",[25,148,149,172,177,189,193,197,201],{"__ignoreMap":37},[41,150,151,153,155,157,159,162,164,166,168,170],{"class":43,"line":44},[41,152,48],{"class":47},[41,154,52],{"class":51},[41,156,55],{"class":47},[41,158,59],{"class":58},[41,160,161],{"class":62},"everyMinute",[41,163,66],{"class":58},[41,165,69],{"class":51},[41,167,72],{"class":58},[41,169,75],{"class":47},[41,171,78],{"class":58},[41,173,174],{"class":43,"line":81},[41,175,176],{"class":84},"    // This will be called every minute\n",[41,178,179,181,183,185,187],{"class":43,"line":88},[41,180,91],{"class":58},[41,182,94],{"class":62},[41,184,66],{"class":58},[41,186,100],{"class":99},[41,188,103],{"class":58},[41,190,191],{"class":43,"line":106},[41,192,109],{"class":58},[41,194,195],{"class":43,"line":112},[41,196,116],{"emptyLinePlaceholder":115},[41,198,199],{"class":43,"line":119},[41,200,122],{"class":84},[41,202,203,205,207],{"class":43,"line":125},[41,204,128],{"class":58},[41,206,131],{"class":62},[41,208,134],{"class":58},[21,210,212],{"id":211},"everyhourwidget-cb",[25,213,214],{},"everyHour(widget, cb)",[17,216,217],{},"Runs the specified callback once per hour when the hour changes.",[32,219,221],{"className":34,"code":220,"language":36,"meta":37,"style":37},"const timerId = Hologram.timer.everyHour(this, () => {\n    // This will be called every hour\n    console.log('Hello!')\n})\n\n// Stop the timer by running\nHologram.removeListener(timerId)\n",[25,222,223,246,251,263,267,271,275],{"__ignoreMap":37},[41,224,225,227,229,231,233,236,238,240,242,244],{"class":43,"line":44},[41,226,48],{"class":47},[41,228,52],{"class":51},[41,230,55],{"class":47},[41,232,59],{"class":58},[41,234,235],{"class":62},"everyHour",[41,237,66],{"class":58},[41,239,69],{"class":51},[41,241,72],{"class":58},[41,243,75],{"class":47},[41,245,78],{"class":58},[41,247,248],{"class":43,"line":81},[41,249,250],{"class":84},"    // This will be called every hour\n",[41,252,253,255,257,259,261],{"class":43,"line":88},[41,254,91],{"class":58},[41,256,94],{"class":62},[41,258,66],{"class":58},[41,260,100],{"class":99},[41,262,103],{"class":58},[41,264,265],{"class":43,"line":106},[41,266,109],{"class":58},[41,268,269],{"class":43,"line":112},[41,270,116],{"emptyLinePlaceholder":115},[41,272,273],{"class":43,"line":119},[41,274,122],{"class":84},[41,276,277,279,281],{"class":43,"line":125},[41,278,128],{"class":58},[41,280,131],{"class":62},[41,282,134],{"class":58},[21,284,286],{"id":285},"repeatonceadayonwidget-time-cb",[25,287,288],{},"repeatOnceADayOn(widget, time, cb)",[17,290,291],{},"Calls the specified callback once per day at the specified time.",[17,293,294,295,298,299,302],{},"The time is specified as a string ",[25,296,297],{},"hours:minuets",". For example to call a timer at 12:30 you would use ",[25,300,301],{},"12:30",". Hours are specified in 24 hour format.",[17,304,305],{},"Note that its not guaranteed that this timer will be called, because the widget may not exist at the specific time its triggered. For that reason, it's recommended that you include code that verifies that it was called when the widget is mounted. Don't rely solely on the timer to change it every day.",[17,307,308],{},"For example, if your widget uses the below function to change a quote every day, make sure to check whether the quote needs to be changed when your widget is mounted. Don't rely solely on the timer to change it every day.",[32,310,312],{"className":34,"code":311,"language":36,"meta":37,"style":37},"// Change the quote at the beginning of every day\nHologram.timer.repeatOnceADayOn(this, '0:0', () => {\n    this.refreshQuote()\n})\n\n// Do something at noon\nconst timerId = Hologram.timer.repeatOnceADayOn(this, '12:0', () => {\n    console.log('Its noon!')\n})\n\n// Stop the timer by running\nHologram.removeListener(timerId)\n",[25,313,314,319,343,357,361,365,370,397,411,416,421,426],{"__ignoreMap":37},[41,315,316],{"class":43,"line":44},[41,317,318],{"class":84},"// Change the quote at the beginning of every day\n",[41,320,321,324,327,329,331,334,337,339,341],{"class":43,"line":81},[41,322,323],{"class":58},"Hologram.timer.",[41,325,326],{"class":62},"repeatOnceADayOn",[41,328,66],{"class":58},[41,330,69],{"class":51},[41,332,333],{"class":58},", ",[41,335,336],{"class":99},"'0:0'",[41,338,72],{"class":58},[41,340,75],{"class":47},[41,342,78],{"class":58},[41,344,345,348,351,354],{"class":43,"line":88},[41,346,347],{"class":51},"    this",[41,349,350],{"class":58},".",[41,352,353],{"class":62},"refreshQuote",[41,355,356],{"class":58},"()\n",[41,358,359],{"class":43,"line":106},[41,360,109],{"class":58},[41,362,363],{"class":43,"line":112},[41,364,116],{"emptyLinePlaceholder":115},[41,366,367],{"class":43,"line":119},[41,368,369],{"class":84},"// Do something at noon\n",[41,371,372,374,376,378,380,382,384,386,388,391,393,395],{"class":43,"line":125},[41,373,48],{"class":47},[41,375,52],{"class":51},[41,377,55],{"class":47},[41,379,59],{"class":58},[41,381,326],{"class":62},[41,383,66],{"class":58},[41,385,69],{"class":51},[41,387,333],{"class":58},[41,389,390],{"class":99},"'12:0'",[41,392,72],{"class":58},[41,394,75],{"class":47},[41,396,78],{"class":58},[41,398,400,402,404,406,409],{"class":43,"line":399},8,[41,401,91],{"class":58},[41,403,94],{"class":62},[41,405,66],{"class":58},[41,407,408],{"class":99},"'Its noon!'",[41,410,103],{"class":58},[41,412,414],{"class":43,"line":413},9,[41,415,109],{"class":58},[41,417,419],{"class":43,"line":418},10,[41,420,116],{"emptyLinePlaceholder":115},[41,422,424],{"class":43,"line":423},11,[41,425,122],{"class":84},[41,427,429,431,433],{"class":43,"line":428},12,[41,430,128],{"class":58},[41,432,131],{"class":62},[41,434,134],{"class":58},[21,436,438],{"id":437},"using-setinterval","Using setInterval()",[17,440,441,442,445],{},"If you use ",[25,443,444],{},"setInterval()"," because one of the above native functions doesn't provide the exact timing you need, it's very important that you store the interval Id for that timer in your code and explicitly destroy it when the widget is removed. If you don't don't do that, the timer will continue to run even after the widget has been removed.",[17,447,448,449,452],{},"Here is an example of how you do that using the Vue.js ",[25,450,451],{},"beforeDestroy()"," method:",[32,454,456],{"className":34,"code":455,"language":36,"meta":37,"style":37},"export default {\n    extends: HologramWidget,\n    data() {\n        return {\n            intervalId: false\n        }\n    },\n    mounted() {\n        this.intervalId = setInterval(() => {\n            this.someFunction()\n        }, 5000)\n    },\n    methods: {\n        someFunction() {\n            // Do something\n        }\n    },\n    beforeDestroy() {\n        clearInterval(this.intervalId)\n    },\n    template: /* html */ `\n        \u003Cdiv class=\"widget-container\">\n            \u003Cp>Hello World!\u003C/p>\n        \u003C/div>\n    `\n}\n",[25,457,458,468,473,481,488,496,501,506,513,534,546,556,560,566,574,580,585,590,598,611,616,628,634,640,646,652],{"__ignoreMap":37},[41,459,460,463,466],{"class":43,"line":44},[41,461,462],{"class":47},"export",[41,464,465],{"class":47}," default",[41,467,78],{"class":58},[41,469,470],{"class":43,"line":81},[41,471,472],{"class":58},"    extends: HologramWidget,\n",[41,474,475,478],{"class":43,"line":88},[41,476,477],{"class":62},"    data",[41,479,480],{"class":58},"() {\n",[41,482,483,486],{"class":43,"line":106},[41,484,485],{"class":47},"        return",[41,487,78],{"class":58},[41,489,490,493],{"class":43,"line":112},[41,491,492],{"class":58},"            intervalId: ",[41,494,495],{"class":51},"false\n",[41,497,498],{"class":43,"line":119},[41,499,500],{"class":58},"        }\n",[41,502,503],{"class":43,"line":125},[41,504,505],{"class":58},"    },\n",[41,507,508,511],{"class":43,"line":399},[41,509,510],{"class":62},"    mounted",[41,512,480],{"class":58},[41,514,515,518,521,524,527,530,532],{"class":43,"line":413},[41,516,517],{"class":51},"        this",[41,519,520],{"class":58},".intervalId ",[41,522,523],{"class":47},"=",[41,525,526],{"class":62}," setInterval",[41,528,529],{"class":58},"(() ",[41,531,75],{"class":47},[41,533,78],{"class":58},[41,535,536,539,541,544],{"class":43,"line":418},[41,537,538],{"class":51},"            this",[41,540,350],{"class":58},[41,542,543],{"class":62},"someFunction",[41,545,356],{"class":58},[41,547,548,551,554],{"class":43,"line":423},[41,549,550],{"class":58},"        }, ",[41,552,553],{"class":51},"5000",[41,555,103],{"class":58},[41,557,558],{"class":43,"line":428},[41,559,505],{"class":58},[41,561,563],{"class":43,"line":562},13,[41,564,565],{"class":58},"    methods: {\n",[41,567,569,572],{"class":43,"line":568},14,[41,570,571],{"class":62},"        someFunction",[41,573,480],{"class":58},[41,575,577],{"class":43,"line":576},15,[41,578,579],{"class":84},"            // Do something\n",[41,581,583],{"class":43,"line":582},16,[41,584,500],{"class":58},[41,586,588],{"class":43,"line":587},17,[41,589,505],{"class":58},[41,591,593,596],{"class":43,"line":592},18,[41,594,595],{"class":62},"    beforeDestroy",[41,597,480],{"class":58},[41,599,601,604,606,608],{"class":43,"line":600},19,[41,602,603],{"class":62},"        clearInterval",[41,605,66],{"class":58},[41,607,69],{"class":51},[41,609,610],{"class":58},".intervalId)\n",[41,612,614],{"class":43,"line":613},20,[41,615,505],{"class":58},[41,617,619,622,625],{"class":43,"line":618},21,[41,620,621],{"class":58},"    template: ",[41,623,624],{"class":84},"/* html */",[41,626,627],{"class":99}," `\n",[41,629,631],{"class":43,"line":630},22,[41,632,633],{"class":99},"        \u003Cdiv class=\"widget-container\">\n",[41,635,637],{"class":43,"line":636},23,[41,638,639],{"class":99},"            \u003Cp>Hello World!\u003C/p>\n",[41,641,643],{"class":43,"line":642},24,[41,644,645],{"class":99},"        \u003C/div>\n",[41,647,649],{"class":43,"line":648},25,[41,650,651],{"class":99},"    `\n",[41,653,655],{"class":43,"line":654},26,[41,656,657],{"class":58},"}\n",[659,660,661],"style",{},"html pre.shiki code .sOPea, html code.shiki .sOPea{--shiki-default:#F97583;--shiki-dark:#F97583}html pre.shiki code .s8ozJ, html code.shiki .s8ozJ{--shiki-default:#79B8FF;--shiki-dark:#79B8FF}html pre.shiki code .suv1-, html code.shiki .suv1-{--shiki-default:#E1E4E8;--shiki-dark:#E1E4E8}html pre.shiki code .sFR8T, html code.shiki .sFR8T{--shiki-default:#B392F0;--shiki-dark:#B392F0}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s4wv1, html code.shiki .s4wv1{--shiki-default:#9ECBFF;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":37,"searchDepth":81,"depth":81,"links":663},[664,665,666,667,668],{"id":23,"depth":81,"text":27},{"id":137,"depth":81,"text":140},{"id":211,"depth":81,"text":214},{"id":285,"depth":81,"text":288},{"id":437,"depth":81,"text":438},"How to use the timer class in Hologram widgets.",[671,675],{"title":672,"path":673,"stem":674,"children":-1},"Weather","/docs/developer/weather","docs/developer/11.weather",{"title":676,"path":677,"stem":678,"children":-1},"Utility Class","/docs/developer/util","docs/developer/13.util",[680],{"title":681,"path":682,"stem":683,"children":684,"navigation":115},"Welcome to Hologram","/docs","docs/0.index",[685,686,690,694,698,757],{"title":681,"path":682,"stem":683,"navigation":115},{"title":687,"path":688,"stem":689,"navigation":115},"Themes & Wallpapers","/docs/themes","docs/1.themes",{"title":691,"path":692,"stem":693,"navigation":115},"Widgets","/docs/widgets","docs/2.widgets",{"title":695,"path":696,"stem":697,"navigation":115},"Settings","/docs/settings","docs/4.settings",{"title":699,"navigation":700,"sectionTitle":701,"collapsible":115,"path":702,"stem":703,"children":704,"page":5},"Developer",{"sectionTitle":701,"collapsible":115},"Developing Widgets","/docs/developer","docs/developer",[705,709,715,719,723,727,731,735,739,743,749,750,752,753],{"title":706,"path":707,"stem":708,"navigation":115},"Widget Developer Guide","/docs/developer/guide","docs/developer/01.guide",{"title":710,"path":711,"stem":712,"navigation":713,"sectionTitle":714},"Hologram Widget Class","/docs/developer/widget-class","docs/developer/02.widget-class",{"sectionTitle":714},"Building Widgets",{"title":716,"path":717,"stem":718,"navigation":115},"Widget Config","/docs/developer/widget-config","docs/developer/03.widget-config",{"title":720,"path":721,"stem":722,"navigation":115},"Widget Settings","/docs/developer/widget-settings","docs/developer/04.widget-settings",{"title":724,"path":725,"stem":726,"navigation":115},"Widget Color Settings","/docs/developer/widget-color-settings","docs/developer/05.widget-color-settings",{"title":728,"path":729,"stem":730,"navigation":115},"Creating Widget Presets","/docs/developer/widget-presets","docs/developer/06.widget-presets",{"title":732,"path":733,"stem":734,"navigation":115},"Making Widgets Scale","/docs/developer/making-widgets-scale","docs/developer/07.making-widgets-scale",{"title":736,"path":737,"stem":738,"navigation":115},"Simple Widget Example","/docs/developer/simple-example","docs/developer/07.simple-example",{"title":740,"path":741,"stem":742,"navigation":115},"Apple Script","/docs/developer/apple-script","docs/developer/08.apple-script",{"title":744,"path":745,"stem":746,"navigation":747,"sectionTitle":748},"Hologram API","/docs/developer/api","docs/developer/10.api",{"sectionTitle":748},"API Reference",{"title":672,"path":673,"stem":674,"navigation":115},{"title":8,"path":4,"stem":751,"navigation":115},"docs/developer/12.timer",{"title":676,"path":677,"stem":678,"navigation":115},{"title":754,"path":755,"stem":756,"navigation":115},"Third Party Libraries","/docs/developer/third-party","docs/developer/14.third-party",{"title":758,"path":759,"stem":760,"navigation":761,"sectionTitle":762},"Frequently Asked Questions","/docs/faq","docs/faq",{"sectionTitle":762},"Help",1755585913038]