JavaScript Debounce function
I built one JavaScript debounce function, I need JavaScript expert's opinion if this is the correct way to do it and if not then what is the flaw in this current function. Thanks in advance for your opinion this will help me to learn.
var debounce = function(inpFun, wait) {
var timeout;
return function () {
if(!timeout) {
inpFun.apply(this, arguments);
timeout = setTimeout(function() {
timeout = undefined;
}, wait);
}
else {
console.log("Debouncing");
}
}
};
var buttonClickFunction = debounce(function (event) {
console.log("Button Clicked");
console.log(event.target.id);
}, 2000);
document.querySelector("#button1").addEventListener("click", buttonClickFunction);<button id="button1">Button</button>javascript function dom debounce
edited Jul 3 at 15:13
Keith
8,2181720
asked Jul 3 at 15:01
Shirshendu Bhowmick
1137
add a comment |
I built one JavaScript debounce function, I need JavaScript expert's opinion if this is the correct way to do it and if not then what is the flaw in this current function. Thanks in advance for your opinion this will help me to learn.
var debounce = function(inpFun, wait) {
var timeout;
return function () {
if(!timeout) {
inpFun.apply(this, arguments);
timeout = setTimeout(function() {
timeout = undefined;
}, wait);
}
else {
console.log("Debouncing");
}
}
};
var buttonClickFunction = debounce(function (event) {
console.log("Button Clicked");
console.log(event.target.id);
}, 2000);
document.querySelector("#button1").addEventListener("click", buttonClickFunction);<button id="button1">Button</button>javascript function dom debounce
edited Jul 3 at 15:13
Keith
8,2181720
asked Jul 3 at 15:01
Shirshendu Bhowmick
1137
7
You should post your code on codereview.stackexchange.com
– ADreNaLiNe-DJ
Jul 3 at 15:03
add a comment |
I built one JavaScript debounce function, I need JavaScript expert's opinion if this is the correct way to do it and if not then what is the flaw in this current function. Thanks in advance for your opinion this will help me to learn.
var debounce = function(inpFun, wait) {
var timeout;
return function () {
if(!timeout) {
inpFun.apply(this, arguments);
timeout = setTimeout(function() {
timeout = undefined;
}, wait);
}
else {
console.log("Debouncing");
}
}
};
var buttonClickFunction = debounce(function (event) {
console.log("Button Clicked");
console.log(event.target.id);
}, 2000);
document.querySelector("#button1").addEventListener("click", buttonClickFunction);<button id="button1">Button</button>javascript function dom debounce
edited Jul 3 at 15:13
Keith
8,2181720
asked Jul 3 at 15:01
Shirshendu Bhowmick
1137
I built one JavaScript debounce function, I need JavaScript expert's opinion if this is the correct way to do it and if not then what is the flaw in this current function. Thanks in advance for your opinion this will help me to learn.
var debounce = function(inpFun, wait) {
var timeout;
return function () {
if(!timeout) {
inpFun.apply(this, arguments);
timeout = setTimeout(function() {
timeout = undefined;
}, wait);
}
else {
console.log("Debouncing");
}
}
};
var buttonClickFunction = debounce(function (event) {
console.log("Button Clicked");
console.log(event.target.id);
}, 2000);
document.querySelector("#button1").addEventListener("click", buttonClickFunction);<button id="button1">Button</button>var debounce = function(inpFun, wait) {
var timeout;
return function () {
if(!timeout) {
inpFun.apply(this, arguments);
timeout = setTimeout(function() {
timeout = undefined;
}, wait);
}
else {
console.log("Debouncing");
}
}
};
var buttonClickFunction = debounce(function (event) {
console.log("Button Clicked");
console.log(event.target.id);
}, 2000);
document.querySelector("#button1").addEventListener("click", buttonClickFunction);<button id="button1">Button</button>var debounce = function(inpFun, wait) {
var timeout;
return function () {
if(!timeout) {
inpFun.apply(this, arguments);
timeout = setTimeout(function() {
timeout = undefined;
}, wait);
}
else {
console.log("Debouncing");
}
}
};
var buttonClickFunction = debounce(function (event) {
console.log("Button Clicked");
console.log(event.target.id);
}, 2000);
document.querySelector("#button1").addEventListener("click", buttonClickFunction);<button id="button1">Button</button>javascript function dom debounce
javascript function dom debounce
edited Jul 3 at 15:13
Keith
8,2181720
asked Jul 3 at 15:01
Shirshendu Bhowmick
1137
edited Jul 3 at 15:13
Keith
8,2181720
asked Jul 3 at 15:01
Shirshendu Bhowmick
1137
edited Jul 3 at 15:13
Keith
8,2181720
edited Jul 3 at 15:13
Keith
8,2181720
edited Jul 3 at 15:13
Keith
8,2181720
8,2181720
asked Jul 3 at 15:01
Shirshendu Bhowmick
1137
asked Jul 3 at 15:01
Shirshendu Bhowmick
1137
asked Jul 3 at 15:01
Shirshendu Bhowmick
1137
1137
7
You should post your code on codereview.stackexchange.com
– ADreNaLiNe-DJ
Jul 3 at 15:03
add a comment |
7
You should post your code on codereview.stackexchange.com
– ADreNaLiNe-DJ
Jul 3 at 15:03
7
7
You should post your code on codereview.stackexchange.com
– ADreNaLiNe-DJ
Jul 3 at 15:03
You should post your code on codereview.stackexchange.com
– ADreNaLiNe-DJ
Jul 3 at 15:03
add a comment |
2 Answers
2
active
oldest
votes
In my opinion the most useful thing to do in situations like these is to look at what the pros did. So lodash and underscore both provide implementations of debounce, and you can find them like this:
- docs: https://lodash.com/docs/4.17.10#debounce
- code: https://github.com/lodash/lodash/blob/master/debounce.js
If you want to understand this kind of code deeply, read the commit history for that file, read the blogpost about the difference between throttle and debounce in the first link, and in general just absorb as much as you can from what others struggled with.
add a comment |
ES6 version debouncing function is the following:
const callback = (...args) => {
console.count('callback throttled with arguments:', args);
}
const debounce = (callback, delay) => {
let timeoutHandler = null
return (...args) => {
if (timeoutHandler) {
clearTimeout(timeoutHandler)
}
timeoutHandler = setTimeout(() => {
callback(...args)
timeoutHandler = null
}, delay)
}
}
window.addEventListener('oninput', debounce(callback, 100))
P.S. As @Anshul explained: Debouncing enforces that a function not be called again until a certain amount of time has passed without it being called. As in "execute this function only if 100 milliseconds have passed without it being called."
answered Nov 21 at 0:01
Roman
2,5281826
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f51157720%2fjavascript-debounce-function%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
In my opinion the most useful thing to do in situations like these is to look at what the pros did. So lodash and underscore both provide implementations of debounce, and you can find them like this:
- docs: https://lodash.com/docs/4.17.10#debounce
- code: https://github.com/lodash/lodash/blob/master/debounce.js
If you want to understand this kind of code deeply, read the commit history for that file, read the blogpost about the difference between throttle and debounce in the first link, and in general just absorb as much as you can from what others struggled with.
add a comment |
In my opinion the most useful thing to do in situations like these is to look at what the pros did. So lodash and underscore both provide implementations of debounce, and you can find them like this:
- docs: https://lodash.com/docs/4.17.10#debounce
- code: https://github.com/lodash/lodash/blob/master/debounce.js
If you want to understand this kind of code deeply, read the commit history for that file, read the blogpost about the difference between throttle and debounce in the first link, and in general just absorb as much as you can from what others struggled with.
add a comment |
In my opinion the most useful thing to do in situations like these is to look at what the pros did. So lodash and underscore both provide implementations of debounce, and you can find them like this:
- docs: https://lodash.com/docs/4.17.10#debounce
- code: https://github.com/lodash/lodash/blob/master/debounce.js
If you want to understand this kind of code deeply, read the commit history for that file, read the blogpost about the difference between throttle and debounce in the first link, and in general just absorb as much as you can from what others struggled with.
In my opinion the most useful thing to do in situations like these is to look at what the pros did. So lodash and underscore both provide implementations of debounce, and you can find them like this:
- docs: https://lodash.com/docs/4.17.10#debounce
- code: https://github.com/lodash/lodash/blob/master/debounce.js
If you want to understand this kind of code deeply, read the commit history for that file, read the blogpost about the difference between throttle and debounce in the first link, and in general just absorb as much as you can from what others struggled with.
answered Jul 3 at 15:18
community wiki
Milimetric
add a comment |
add a comment |
ES6 version debouncing function is the following:
const callback = (...args) => {
console.count('callback throttled with arguments:', args);
}
const debounce = (callback, delay) => {
let timeoutHandler = null
return (...args) => {
if (timeoutHandler) {
clearTimeout(timeoutHandler)
}
timeoutHandler = setTimeout(() => {
callback(...args)
timeoutHandler = null
}, delay)
}
}
window.addEventListener('oninput', debounce(callback, 100))
P.S. As @Anshul explained: Debouncing enforces that a function not be called again until a certain amount of time has passed without it being called. As in "execute this function only if 100 milliseconds have passed without it being called."
answered Nov 21 at 0:01
Roman
2,5281826
add a comment |
ES6 version debouncing function is the following:
const callback = (...args) => {
console.count('callback throttled with arguments:', args);
}
const debounce = (callback, delay) => {
let timeoutHandler = null
return (...args) => {
if (timeoutHandler) {
clearTimeout(timeoutHandler)
}
timeoutHandler = setTimeout(() => {
callback(...args)
timeoutHandler = null
}, delay)
}
}
window.addEventListener('oninput', debounce(callback, 100))
P.S. As @Anshul explained: Debouncing enforces that a function not be called again until a certain amount of time has passed without it being called. As in "execute this function only if 100 milliseconds have passed without it being called."
answered Nov 21 at 0:01
Roman
2,5281826
add a comment |
ES6 version debouncing function is the following:
const callback = (...args) => {
console.count('callback throttled with arguments:', args);
}
const debounce = (callback, delay) => {
let timeoutHandler = null
return (...args) => {
if (timeoutHandler) {
clearTimeout(timeoutHandler)
}
timeoutHandler = setTimeout(() => {
callback(...args)
timeoutHandler = null
}, delay)
}
}
window.addEventListener('oninput', debounce(callback, 100))
P.S. As @Anshul explained: Debouncing enforces that a function not be called again until a certain amount of time has passed without it being called. As in "execute this function only if 100 milliseconds have passed without it being called."
answered Nov 21 at 0:01
Roman
2,5281826
ES6 version debouncing function is the following:
const callback = (...args) => {
console.count('callback throttled with arguments:', args);
}
const debounce = (callback, delay) => {
let timeoutHandler = null
return (...args) => {
if (timeoutHandler) {
clearTimeout(timeoutHandler)
}
timeoutHandler = setTimeout(() => {
callback(...args)
timeoutHandler = null
}, delay)
}
}
window.addEventListener('oninput', debounce(callback, 100))
P.S. As @Anshul explained: Debouncing enforces that a function not be called again until a certain amount of time has passed without it being called. As in "execute this function only if 100 milliseconds have passed without it being called."
answered Nov 21 at 0:01
Roman
2,5281826
edited Nov 21 at 0:11
answered Nov 21 at 0:01
Roman
2,5281826
answered Nov 21 at 0:01
Roman
2,5281826
answered Nov 21 at 0:01
Roman
2,5281826
2,5281826
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f51157720%2fjavascript-debounce-function%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
7
You should post your code on codereview.stackexchange.com
– ADreNaLiNe-DJ
Jul 3 at 15:03