├── LICENSE ├── index.html └── script.js /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 WebDevSimplified 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |
13 | Default: 14 | 15 |
16 |
17 | Debounce: 18 | 19 |
20 |
21 | Throttle: 22 | 23 |
24 | 25 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const input = document.querySelector("input") 2 | const defaultText = document.getElementById("default") 3 | const debounceText = document.getElementById("debounce") 4 | const throttleText = document.getElementById("throttle") 5 | 6 | const updateDebounceText = debounce(() => { 7 | incrementCount(debounceText) 8 | }) 9 | const updateThrottleText = throttle(() => { 10 | incrementCount(throttleText) 11 | }, 100) 12 | 13 | function debounce(cb, delay = 1000) { 14 | let timeout 15 | 16 | return (...args) => { 17 | clearTimeout(timeout) 18 | timeout = setTimeout(() => { 19 | cb(...args) 20 | }, delay) 21 | } 22 | } 23 | 24 | function throttle(cb, delay = 1000) { 25 | let shouldWait = false 26 | let waitingArgs 27 | const timeoutFunc = () => { 28 | if (waitingArgs == null) { 29 | shouldWait = false 30 | } else { 31 | cb(...waitingArgs) 32 | waitingArgs = null 33 | setTimeout(timeoutFunc, delay) 34 | } 35 | } 36 | 37 | return (...args) => { 38 | if (shouldWait) { 39 | waitingArgs = args 40 | return 41 | } 42 | 43 | cb(...args) 44 | shouldWait = true 45 | 46 | setTimeout(timeoutFunc, delay) 47 | } 48 | } 49 | 50 | document.addEventListener("mousemove", e => { 51 | incrementCount(defaultText) 52 | updateDebounceText() 53 | updateThrottleText() 54 | }) 55 | 56 | function incrementCount(element) { 57 | element.textContent = (parseInt(element.innerText) || 0) + 1 58 | } 59 | --------------------------------------------------------------------------------