What is Debouncing and Throttling in JavaScript?

Let's take an example of a 𝘀𝗵𝗼𝗽𝗽𝗶𝗻𝗴 𝗰𝗮𝗿𝘁 web app so that there will be a 𝗰𝗵𝗲𝗰𝗸𝗼𝘂𝘁 𝗯𝘂𝘁𝘁𝗼𝗻 𝘁𝗼 𝗽𝗹𝗮𝗰𝗲 𝗮𝗻 𝗼𝗿𝗱𝗲𝗿 𝗶𝗳 𝗮 𝘂𝘀𝗲𝗿 𝗮𝗰𝗰𝗶𝗱𝗲𝗻𝘁𝗮𝗹𝗹𝘆 𝗰𝗹𝗶𝗰𝗸𝘀 𝘁𝗵𝗲 𝗯𝘂𝘁𝘁𝗼𝗻 𝘁𝘄𝗶𝗰𝗲 𝘁𝗵𝗲𝗻 𝗶𝘁 𝘄𝗶𝗹𝗹 𝗽𝗹𝗮𝗰𝗲 𝘁𝗵𝗲 𝗼𝗿𝗱𝗲𝗿 𝘁𝘄𝗶𝗰𝗲? (so it depends on the design of the Web App)

𝗘𝘅𝗮𝗺𝗽𝗹𝗲 𝗖𝗼𝗱𝗲 𝘄𝗶𝘁𝗵𝗼𝘂𝘁 𝗗𝗲𝗯𝗼𝘂𝗻𝗰𝗶𝗻𝗴 𝗮𝗻𝗱 𝗧𝗵𝗿𝗼𝘁𝘁𝗹𝗶𝗻𝗴

Click Me

document.getElementById(‘y’).addEventListener(‘click’, e => { console.log(“Event triggered”) })

Codepen: https://codepen.io/yashmantri/pen/LYpdQZ

𝗦𝗼, 𝗵𝗲𝗿𝗲 𝗗𝗲𝗯𝗼𝘂𝗻𝗰𝗶𝗻𝗴 𝗮𝗻𝗱 𝗧𝗵𝗿𝗼𝘁𝘁𝗹𝗶𝗻𝗴 𝗰𝗼𝗺𝗲𝘀 𝗶𝗻𝘁𝗼 𝘁𝗵𝗲 𝗽𝗶𝗰𝘁𝘂𝗿𝗲. 𝗜𝘁 𝗶𝘀 𝘂𝘀𝗲𝗱 𝘁𝗼 𝗮𝘃𝗼𝗶𝗱 𝘂𝗻𝗻𝗲𝗰𝗲𝘀𝘀𝗮𝗿𝘆 𝗲𝘃𝗲𝗻𝘁𝘀.

𝗙𝗶𝗿𝘀𝘁 𝗹𝗲𝘁'𝘀 𝗱𝗶𝘀𝗰𝘂𝘀𝘀 𝗗𝗲𝗯𝗼𝘂𝗻𝗰𝗶𝗻𝗴:

𝗗𝗲𝗯𝗼𝘂𝗻𝗰𝗶𝗻𝗴 𝗺𝗲𝗮𝗻𝘀 that if you keep clicking on the same button the event will 𝗼𝗻𝗹𝘆 𝗯𝗲 𝘁𝗿𝗶𝗴𝗴𝗲𝗿𝗲𝗱 𝗼𝗻 𝘁𝗵𝗲 𝗹𝗮𝘀𝘁 𝗰𝗹𝗶𝗰𝗸.

𝗗𝗲𝗯𝗼𝘂𝗻𝗰𝗲 𝗳𝘂𝗻𝗰𝘁𝗶𝗼𝗻 𝘁𝗮𝗸𝗲𝘀 𝘁𝘄𝗼 𝗮𝗿𝗴𝘂𝗺𝗲𝗻𝘁𝘀 𝗳𝗶𝗿𝘀𝘁 𝗼𝗻𝗲 𝗶𝘀 𝘁𝗵𝗲 𝗳𝘂𝗻𝗰𝘁𝗶𝗼𝗻 𝘁𝗵𝗮𝘁 𝘆𝗼𝘂 𝘄𝗮𝗻𝘁 𝘁𝗼 𝗲𝘅𝗲𝗰𝘂𝘁𝗲 𝗼𝗻 𝗮 𝗰𝗹𝗶𝗰𝗸 𝗮𝗻𝗱 𝘁𝗵𝗲 𝘀𝗲𝗰𝗼𝗻𝗱 𝗼𝗻𝗲 𝗶𝘀 𝘁𝗵𝗲 𝗱𝗲𝗹𝗮𝘆.

Codepen: https://codepen.io/yashmantri/pen/jObpzZz

𝗡𝗼𝘄 𝗹𝗲𝘁'𝘀 𝗱𝗶𝘀𝗰𝘂𝘀𝘀 𝗧𝗵𝗿𝗼𝘁𝘁𝗹𝗶𝗻𝗴:

𝗧𝗵𝗿𝗼𝘁𝘁𝗹𝗶𝗻𝗴 𝗶𝘀 𝘀𝗶𝗺𝗶𝗹𝗮𝗿 𝘁𝗼 𝗗𝗲𝗯𝗼𝘂𝗻𝗰𝗶𝗻𝗴. It avoids unnecessary events.

𝗦𝗼 𝘆𝗼𝘂 𝗺𝘂𝘀𝘁 𝗯𝗲 𝘄𝗼𝗻𝗱𝗲𝗿𝗶𝗻𝗴 𝘄𝗵𝗮𝘁 𝗶𝘀 𝘁𝗵𝗲 𝗱𝗶𝗳𝗳𝗲𝗿𝗲𝗻𝗰𝗲 𝗯𝗲𝘁𝘄𝗲𝗲𝗻 𝘁𝗵𝗲𝗺?

𝗧𝗵𝗿𝗼𝘁𝘁𝗹𝗶𝗻𝗴 𝗺𝗲𝗮𝗻𝘀 that i𝗳 𝘆𝗼𝘂 𝗰𝗹𝗶𝗰𝗸 𝗮 𝗯𝘂𝘁𝘁𝗼𝗻, 𝘁𝗵𝗲 𝗲𝘃𝗲𝗻𝘁 𝘄𝗶𝗹𝗹 𝗯𝗲 𝘁𝗿𝗶𝗴𝗴𝗲𝗿𝗲𝗱 and 𝘄𝗶𝘁𝗵𝗶𝗻 𝘁𝗵𝗲 𝗱𝗲𝗹𝗮𝘆 (argument to the throttling function) if the user 𝗰𝗹𝗶𝗰𝗸𝘀 𝘁𝗵𝗲 𝘀𝗮𝗺𝗲 𝗯𝘂𝘁𝘁𝗼𝗻 𝗮𝗴𝗮𝗶𝗻, the 𝗲𝘃𝗲𝗻𝘁 𝘄𝗶𝗹𝗹 𝗻𝗼𝘁 𝗯𝗲 𝘁𝗿𝗶𝗴𝗴𝗲𝗿𝗲𝗱.

The throttling function takes two arguments first one is the function that you want to execute on a click and the second one is the delay.

Codepen: https://codepen.io/yashmantri/pen/ZEbxrBj

𝗛𝗮𝘃𝗲 𝘆𝗼𝘂 𝗲𝘃𝗲𝗿 𝘂𝘀𝗲𝗱 𝘁𝗵𝗿𝗼𝘁𝘁𝗹𝗶𝗻𝗴 𝗼𝗿 𝗱𝗲𝗯𝗼𝘂𝗻𝗰𝗶𝗻𝗴?