{"id":3056,"date":"2016-01-22T01:37:37","date_gmt":"2016-01-22T01:37:37","guid":{"rendered":"http:\/\/www.garysieling.com\/blog\/?p=3056"},"modified":"2020-03-31T00:40:37","modified_gmt":"2020-03-31T00:40:37","slug":"lodash-debounce-example","status":"publish","type":"post","link":"https:\/\/www.garysieling.com\/blog\/lodash-debounce-example\/","title":{"rendered":"Lodash debounce example"},"content":{"rendered":"\n

To ensure that a JavaScript function is not called more than once every few seconds, you can run wrap it it in the “debounce” function available in lodash:<\/p>\n\n\n\n

const run = () =>\n   console.log('abc');\n\nconst lag = \n  _.debounce(run, 1500);\n\nlag();\nlag();\nlag();\n<\/pre>\n\n\n\n
The output will be:<\/p>\n\n\n\n
abc<\/pre>\n\n\n\n
In this case, the function will only get run once.<\/p>\n\n\n\n
If you pass an argument, it will be sent through to the function, but still only one call is made. This is why these work well as click handlers.<\/p>\n\n\n\n
const run = (a) => \n   console.log(a);\n\nconst fn = \n  _.debounce(run, 1500);\n\nfn('a');\nfn('b');\nfn('c');<\/pre>\n\n\n\n
The output will be:<\/p>\n\n\n\n
c<\/pre>\n\n\n\n
By default, debounce calls the function at the end of the interval.<\/p>\n\n\n\n
If it to run at the beginning of the interval without a pause, do this:<\/p>\n\n\n\n
const fn = \n  _.debounce(run, 500, {leading: true});\n\nfn('a'); \nfn('b'); \nfn('c');<\/pre>\n\n\n\n
This will display the following:<\/p>\n\n\n\n
a<\/pre>\n","protected":false},"excerpt":{"rendered":"
This post shows how to use the lodash debounce function.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[4],"tags":[302,343],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t