[{"data":1,"prerenderedAt":281},["ShallowReactive",2],{"i-mdi:github":3,"i-mdi:linkedin":8,"i-mdi:instagram":10,"blog-debounce-apa-bedanya-dengan-throttle":12,"i-solar:calendar-linear":275,"i-solar:arrow-left-linear":277,"i-solar:pen-2-linear":279},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,24,false,"\u003Cpath fill=\"currentColor\" d=\"M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"currentColor\" d=\"M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93zM6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"currentColor\" d=\"M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3\"\u002F>",{"id":13,"title":14,"body":15,"date":265,"description":266,"extension":267,"image":268,"meta":269,"navigation":156,"path":270,"seo":271,"sitemap":272,"stem":273,"__hash__":274},"blog\u002Fblog\u002Fdebounce-apa-bedanya-dengan-throttle.md","Debounce – What's the difference with throttle?",{"type":16,"value":17,"toc":257},"minimark",[18,32,37,45,49,52,57,60,75,96,102,211,216,220,239,243,253],[19,20,21,22,26,27,31],"p",{},"As a web developer, whether back-end or front-end, you’ve probably heard the term ",[23,24,25],"strong",{},"Throttle"," before, right? Simply put, throttle is used to limit the number of hits to an endpoint or application by a single user\u002Fclient within a certain period. For example, if we want to limit the ",[28,29,30],"code",{},"api\u002Fuser"," endpoint to only be accessed 60 times per minute, we can use throttling technology. So, what is debounce?",[33,34,36],"h2",{"id":35},"debounce","Debounce",[19,38,39,40,44],{},"Debounce literally means ",[41,42,43],"em",{},"to bounce"," if you translate it with Google Translate, and that’s not far off. Debounce comes from an electronics concept, like a TV remote, where the remote only sends a signal when you’ve actually finished pressing a button. The concept is similar here.",[33,46,48],{"id":47},"when-should-you-use-debounce","When should you use debounce?",[19,50,51],{},"Let me explain. As a good front-end developer, it’s best to maintain harmony between FE and BE developers, right? One way to do this is by using debounce. For example, suppose we want to create an input field that searches for a list of districts based on the keyword entered by the user. So, what should we do? Here’s a sample case.",[53,54,56],"h3",{"id":55},"example-case","Example Case",[19,58,59],{},"An input field requires a minimum of 3 characters, and the system should hit the API when the user finishes typing, with a 100ms delay after the last input. So, how do we do this in JavaScript? Here’s how:",[61,62,63],"ol",{},[64,65,66,67,70,71,74],"li",{},"First, you need to set a global variable, either with ",[28,68,69],{},"var"," or ",[28,72,73],{},"let",", as needed.",[76,77,82],"pre",{"className":78,"code":79,"language":80,"meta":81,"style":81},"language-js shiki shiki-themes github-light github-dark","let debounce\n","js","",[28,83,84],{"__ignoreMap":81},[85,86,89,92],"span",{"class":87,"line":88},"line",1,[85,90,73],{"class":91},"szBVR",[85,93,95],{"class":94},"sVt8B"," debounce\n",[61,97,99],{"start":98},2,[64,100,101],{},"In the main trigger function (can be applied in the listener)",[76,103,105],{"className":78,"code":104,"language":80,"meta":81,"style":81},"const onChange = () => {\n  if (debounce) {\n    clearTimeout(debounce)\n  }\n\n  debounce = setTimeout(() => {\n    fetch('some_stuff')\n  }, 100)\n}\n",[28,106,107,128,136,145,151,158,177,193,205],{"__ignoreMap":81},[85,108,109,112,116,119,122,125],{"class":87,"line":88},[85,110,111],{"class":91},"const",[85,113,115],{"class":114},"sScJk"," onChange",[85,117,118],{"class":91}," =",[85,120,121],{"class":94}," () ",[85,123,124],{"class":91},"=>",[85,126,127],{"class":94}," {\n",[85,129,130,133],{"class":87,"line":98},[85,131,132],{"class":91},"  if",[85,134,135],{"class":94}," (debounce) {\n",[85,137,139,142],{"class":87,"line":138},3,[85,140,141],{"class":114},"    clearTimeout",[85,143,144],{"class":94},"(debounce)\n",[85,146,148],{"class":87,"line":147},4,[85,149,150],{"class":94},"  }\n",[85,152,154],{"class":87,"line":153},5,[85,155,157],{"emptyLinePlaceholder":156},true,"\n",[85,159,161,164,167,170,173,175],{"class":87,"line":160},6,[85,162,163],{"class":94},"  debounce ",[85,165,166],{"class":91},"=",[85,168,169],{"class":114}," setTimeout",[85,171,172],{"class":94},"(() ",[85,174,124],{"class":91},[85,176,127],{"class":94},[85,178,180,183,186,190],{"class":87,"line":179},7,[85,181,182],{"class":114},"    fetch",[85,184,185],{"class":94},"(",[85,187,189],{"class":188},"sZZnC","'some_stuff'",[85,191,192],{"class":94},")\n",[85,194,196,199,203],{"class":87,"line":195},8,[85,197,198],{"class":94},"  }, ",[85,200,202],{"class":201},"sj4cs","100",[85,204,192],{"class":94},[85,206,208],{"class":87,"line":207},9,[85,209,210],{"class":94},"}\n",[61,212,213],{"start":138},[64,214,215],{},"Yep, that's it—simple, right? Okay, let's break it down.",[53,217,219],{"id":218},"explanation","Explanation",[61,221,222,225,232],{},[64,223,224],{},"First, we need to set a variable to hold the timeout function.",[64,226,227,228,231],{},"We always need to check if the variable already has a value; if it does, use the ",[28,229,230],{},"clearTimeout"," function to remove the queued delay.",[64,233,234,235,238],{},"Now, just fill the variable again. If there are no more changes, the variable won't be cleared, so ",[28,236,237],{},"fetch"," (the main function) will automatically be triggered.",[33,240,242],{"id":241},"debounce-vs-throttle","Debounce vs Throttle",[19,244,245,246,248,249,252],{},"Short and sweet, right? It's not hard to prevent things like flood caused by front-end apps—just start by using ",[41,247,35],{},". But that doesn't mean you should ignore ",[41,250,251],{},"throttle","; you still need both to keep things in sync. So that's a simple article from me, thanks for reading and see you in the next post.",[254,255,256],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}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);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":81,"searchDepth":98,"depth":98,"links":258},[259,260,264],{"id":35,"depth":98,"text":36},{"id":47,"depth":98,"text":48,"children":261},[262,263],{"id":55,"depth":138,"text":56},{"id":218,"depth":138,"text":219},{"id":241,"depth":98,"text":242},"0202-06-10","Debounce means delaying the execution of a repeatedly called function until there is an idle condition within a specified time range.","md","\u002Fimages\u002Fblog\u002Fdebounce.png",{},"\u002Fblog\u002Fdebounce-apa-bedanya-dengan-throttle",{"title":14,"description":266},{"loc":270},"blog\u002Fdebounce-apa-bedanya-dengan-throttle","uBmMtvdDCCa1Vhi5eWjUFvVw3_Tg8nQ9oxkvf9Jv7Zc",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":276},"\u003Cg fill=\"none\">\u003Cpath stroke=\"currentColor\" stroke-width=\"1.5\" d=\"M2 12c0-3.771 0-5.657 1.172-6.828S6.229 4 10 4h4c3.771 0 5.657 0 6.828 1.172S22 8.229 22 12v2c0 3.771 0 5.657-1.172 6.828S17.771 22 14 22h-4c-3.771 0-5.657 0-6.828-1.172S2 17.771 2 14z\"\u002F>\u003Cpath stroke=\"currentColor\" stroke-linecap=\"round\" stroke-width=\"1.5\" d=\"M7 4V2.5M17 4V2.5M2.5 9h19\"\u002F>\u003Cpath fill=\"currentColor\" d=\"M18 17a1 1 0 1 1-2 0a1 1 0 0 1 2 0m0-4a1 1 0 1 1-2 0a1 1 0 0 1 2 0m-5 4a1 1 0 1 1-2 0a1 1 0 0 1 2 0m0-4a1 1 0 1 1-2 0a1 1 0 0 1 2 0m-5 4a1 1 0 1 1-2 0a1 1 0 0 1 2 0m0-4a1 1 0 1 1-2 0a1 1 0 0 1 2 0\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":278},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M20 12H4m0 0l6-6m-6 6l6 6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":280},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\u003Cpath stroke-linecap=\"round\" d=\"M4 22h16\"\u002F>\u003Cpath d=\"m13.888 3.663l.742-.742a3.146 3.146 0 1 1 4.449 4.45l-.742.74m-4.449-4.448s.093 1.576 1.483 2.966s2.966 1.483 2.966 1.483m-4.449-4.45L7.071 10.48c-.462.462-.693.692-.891.947a5.2 5.2 0 0 0-.599.969c-.139.291-.242.601-.449 1.22l-.875 2.626m14.08-8.13l-6.817 6.817c-.462.462-.692.692-.947.891q-.451.352-.969.599c-.291.139-.601.242-1.22.448l-2.626.876m0 0l-.641.213a.848.848 0 0 1-1.073-1.073l.213-.641m1.501 1.5l-1.5-1.5\"\u002F>\u003C\u002Fg>",1779378197990]