{"id":15828776,"url":"https://github.com/sagold/tick","last_synced_at":"2025-07-27T06:11:56.875Z","repository":{"id":142262152,"uuid":"306263833","full_name":"sagold/tick","owner":"sagold","description":"old-school performance friendly timing utilities in dom-context","archived":false,"fork":false,"pushed_at":"2021-01-11T16:52:15.000Z","size":83,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-20T14:27:39.725Z","etag":null,"topics":["debounce","dom","loop","performance","raf","requestanimationframe"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sagold.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-10-22T07:56:38.000Z","updated_at":"2020-10-22T11:12:37.000Z","dependencies_parsed_at":null,"dependency_job_id":"cc68c8a2-dd02-4018-9b0c-7a59ef85e11f","html_url":"https://github.com/sagold/tick","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sagold%2Ftick","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sagold%2Ftick/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sagold%2Ftick/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sagold%2Ftick/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sagold","download_url":"https://codeload.github.com/sagold/tick/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246628226,"owners_count":20808106,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["debounce","dom","loop","performance","raf","requestanimationframe"],"created_at":"2024-10-05T10:42:23.397Z","updated_at":"2025-04-01T11:09:54.731Z","avatar_url":"https://github.com/sagold.png","language":"TypeScript","readme":"# tick\n\n\u003e old-school performance friendly timing utilities in dom-context\n\n`yarn add @sagold/tick` or `npm i @sagold/tick`\n\nSince 2012, i use these little helpers for all performance critical tasks. Until now, they were copied multiple times, into multiple projects. Finally they have their own package. They follow performance best practices which are still true today.\n\n\n**Overview**\n\n- [Why and what, performance guidelines](#user-content-why-and-what)\n- [Import](#user-content-import)\n- [General usage](#user-content-general-usage)\n\n\n## why and what\n\n**bulk updates**\nThe main reason for this custom loop is an optimization for browser bulk updates. This means, we try to get as many dom-updates as possible into a single browser-repaint. Thus, the `loop` will call `calculate` for all loopable entities to prepare a possible dom-update. The following call to `render` expects only the remaining dom-assignments that will trigger a browser-repaint.\n\n**further performance guidelines** (currently unexplained)\n\n- running everything in one loop\n- dont use css animations in conjuction with js-animations (js only)\n- dont use strict timeouts or intervals\n- prevent object and array creation (reuse, keep in state)\n\n\n## Import\n\n**via script**\n\n```html\n\u003cscript type=\"text/javascript\" src=\"node_modules/@sagold/tick/dist/tick.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    const { loop, Timeout, Debounce } = window.tick;\n\u003c/script\u003e\n```\n\n**via module**\n\n```js\nimport { loop, Timeout, Debounce } from \"@sagold/tick\";\n```\n\n\n## General usage\n\nAll there is, is a function `calculate` executed within a requestAnimationFrame (raf) and a second function `render` which behaves exactly like calculate, but is called afterwards.\n\n```js\nimport { loop, EXIT } from \"@sagold/tick\";\n\n// the following will add a function and execute it infinitely within a raf\nconst timer1 = {\n    calculate(currentMs) { \n        console.log(\"tick\", currentMs); \n    }\n};\nloop.add(timer1);\n\n// the following will add a function and execute it once\nconst timer2 = {\n    calculate(currentMs) { \n        console.log(\"tick\", currentMs); \n        return EXIT; // true\n    }\n};\nloop.add(timer2);\n\n// the following will add a function for around 1s\nconst timer3 = {\n    start: Date.now(),\n    calculate(currentMs) { \n        console.log(\"tick\", currentMs); \n        if (currentMs - this.start \u003e 1000) {\n            return EXIT; // true    \n        }\n    }\n};\nloop.add(timer3);\n\n// the following will log \"calculate 1\", \"render 1\", \"calculate 2\", \"render 2\" infinitely\nconst timer = {\n    start: Date.now(),\n    calculate(currentMs) { \n        console.log(\"calculate\", currentMs); \n    },\n    render(currentMs) {\n        console.log(\"render\", currentMs); \n    }\n};\nloop.add(timer);\n```\n\n\n### Timeout\n\n```js\nimport { Timeout } from \"@sagold/tick\";\n\nconst ttl = 1000;\nconst onTimeout = () =\u003e console.log(\"done\");\nconst timeout = new Timeout(onTimeout, ttl);\n\n// start timeout\ntimeout.start();\n\n// reset ttl while timeout is running\ntimeout.keepAlive();\n\n// reuse timeout and start it again\ntimeout.start();\n```\n\n\n### Debounce\n\n```js\nimport { Debounce } from \"@sagold/tick\";\n\nconst ttl = 1000/2;\nconst interval = 1000/20;\nconst onUpdate = () =\u003e console.log(\"update\");\nconst onEnd = () =\u003e console.log(\"done\");\nconst debounce = new Debounce(onUpdate, onEnd, interval, ttl);\n\n// start debounce\ndebounce.start(); // logs \"update\"\n\n// will call \"onUpdate\" once within each `interval`\ndebounce.update();\ndebounce.update();\ndebounce.update();\ndebounce.update();\n\n// logs \"end\", after no more updates have been received within `ttl`\n```\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsagold%2Ftick","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsagold%2Ftick","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsagold%2Ftick/lists"}