Stop sending request if got the same data
I am working on an infinite scroll to display data with an Angular component. The idea is when I got scroll event, I will ask to have more data by change the value of limit when call the API.
I will stop call the API if the data.length < limit && data.length === currentData.length but because everything is async so that this component call at least 10 times the same request for increasing limit to receive the same data. The logic to stop the call is inside the subscribe handler.
I think I need to catch scroll end event not only scroll but this event not exists, is there any other approach to this problem?
javascript angular asynchronous request infinite-scroll
asked Nov 23 '18 at 15:49
Tho VoTho Vo
1,3221121
add a comment |
I am working on an infinite scroll to display data with an Angular component. The idea is when I got scroll event, I will ask to have more data by change the value of limit when call the API.
I will stop call the API if the data.length < limit && data.length === currentData.length but because everything is async so that this component call at least 10 times the same request for increasing limit to receive the same data. The logic to stop the call is inside the subscribe handler.
I think I need to catch scroll end event not only scroll but this event not exists, is there any other approach to this problem?
javascript angular asynchronous request infinite-scroll
asked Nov 23 '18 at 15:49
Tho VoTho Vo
1,3221121
add a comment |
I am working on an infinite scroll to display data with an Angular component. The idea is when I got scroll event, I will ask to have more data by change the value of limit when call the API.
I will stop call the API if the data.length < limit && data.length === currentData.length but because everything is async so that this component call at least 10 times the same request for increasing limit to receive the same data. The logic to stop the call is inside the subscribe handler.
I think I need to catch scroll end event not only scroll but this event not exists, is there any other approach to this problem?
javascript angular asynchronous request infinite-scroll
asked Nov 23 '18 at 15:49
Tho VoTho Vo
1,3221121
I am working on an infinite scroll to display data with an Angular component. The idea is when I got scroll event, I will ask to have more data by change the value of limit when call the API.
I will stop call the API if the data.length < limit && data.length === currentData.length but because everything is async so that this component call at least 10 times the same request for increasing limit to receive the same data. The logic to stop the call is inside the subscribe handler.
I think I need to catch scroll end event not only scroll but this event not exists, is there any other approach to this problem?
javascript angular asynchronous request infinite-scroll
javascript angular asynchronous request infinite-scroll
asked Nov 23 '18 at 15:49
Tho VoTho Vo
1,3221121
asked Nov 23 '18 at 15:49
Tho VoTho Vo
1,3221121
asked Nov 23 '18 at 15:49
Tho VoTho Vo
1,3221121
asked Nov 23 '18 at 15:49
Tho VoTho Vo
1,3221121
asked Nov 23 '18 at 15:49
Tho VoTho Vo
1,3221121
1,3221121
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
If i understand correctly, the problem you're experiencing is caused by the scroll event triggered multiple times by the browser.
what you can do to avoid this big overhead is to implement a simple debounce mechanism to avoid calling the same api multiple times within a specific interval.
something like:
function debounce(fn, debounceTime = 500) {
let timeout = -1;
const currentScope = this;
return function (...args) {
clearTimeout(timeout);
timeout = setTimeout(fn.bind(currentScope, ...args), debounceTime);
}
}
and then call your loadData function
const softLoadData = debounce(loadData);
at this point your new function softLoadData won't be called more than once within an interval of 500ms (that you can choose) up to your needs.
answered Nov 23 '18 at 16:01
KarimKarim
4,8391719
1
Nice, I already thought about usingsetTimeoutbut not sure how to, I will try to implement it soon
– Tho Vo
Nov 23 '18 at 19:17
add a comment |
I think you should mark some boolean as "waiting for data" - and as long as the data hasn't completely loaded and the updated accordingly refreshed, the scroll event will do nothing.
answered Nov 23 '18 at 16:01
ShushanShushan
1,1171814
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%2f53449604%2fstop-sending-request-if-got-the-same-data%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
If i understand correctly, the problem you're experiencing is caused by the scroll event triggered multiple times by the browser.
what you can do to avoid this big overhead is to implement a simple debounce mechanism to avoid calling the same api multiple times within a specific interval.
something like:
function debounce(fn, debounceTime = 500) {
let timeout = -1;
const currentScope = this;
return function (...args) {
clearTimeout(timeout);
timeout = setTimeout(fn.bind(currentScope, ...args), debounceTime);
}
}
and then call your loadData function
const softLoadData = debounce(loadData);
at this point your new function softLoadData won't be called more than once within an interval of 500ms (that you can choose) up to your needs.
answered Nov 23 '18 at 16:01
KarimKarim
4,8391719
1
Nice, I already thought about usingsetTimeoutbut not sure how to, I will try to implement it soon
– Tho Vo
Nov 23 '18 at 19:17
add a comment |
If i understand correctly, the problem you're experiencing is caused by the scroll event triggered multiple times by the browser.
what you can do to avoid this big overhead is to implement a simple debounce mechanism to avoid calling the same api multiple times within a specific interval.
something like:
function debounce(fn, debounceTime = 500) {
let timeout = -1;
const currentScope = this;
return function (...args) {
clearTimeout(timeout);
timeout = setTimeout(fn.bind(currentScope, ...args), debounceTime);
}
}
and then call your loadData function
const softLoadData = debounce(loadData);
at this point your new function softLoadData won't be called more than once within an interval of 500ms (that you can choose) up to your needs.
answered Nov 23 '18 at 16:01
KarimKarim
4,8391719
1
Nice, I already thought about usingsetTimeoutbut not sure how to, I will try to implement it soon
– Tho Vo
Nov 23 '18 at 19:17
add a comment |
If i understand correctly, the problem you're experiencing is caused by the scroll event triggered multiple times by the browser.
what you can do to avoid this big overhead is to implement a simple debounce mechanism to avoid calling the same api multiple times within a specific interval.
something like:
function debounce(fn, debounceTime = 500) {
let timeout = -1;
const currentScope = this;
return function (...args) {
clearTimeout(timeout);
timeout = setTimeout(fn.bind(currentScope, ...args), debounceTime);
}
}
and then call your loadData function
const softLoadData = debounce(loadData);
at this point your new function softLoadData won't be called more than once within an interval of 500ms (that you can choose) up to your needs.
answered Nov 23 '18 at 16:01
KarimKarim
4,8391719
If i understand correctly, the problem you're experiencing is caused by the scroll event triggered multiple times by the browser.
what you can do to avoid this big overhead is to implement a simple debounce mechanism to avoid calling the same api multiple times within a specific interval.
something like:
function debounce(fn, debounceTime = 500) {
let timeout = -1;
const currentScope = this;
return function (...args) {
clearTimeout(timeout);
timeout = setTimeout(fn.bind(currentScope, ...args), debounceTime);
}
}
and then call your loadData function
const softLoadData = debounce(loadData);
at this point your new function softLoadData won't be called more than once within an interval of 500ms (that you can choose) up to your needs.
answered Nov 23 '18 at 16:01
KarimKarim
4,8391719
edited Dec 1 '18 at 17:08
answered Nov 23 '18 at 16:01
KarimKarim
4,8391719
answered Nov 23 '18 at 16:01
KarimKarim
4,8391719
answered Nov 23 '18 at 16:01
KarimKarim
4,8391719
4,8391719
1
Nice, I already thought about usingsetTimeoutbut not sure how to, I will try to implement it soon
– Tho Vo
Nov 23 '18 at 19:17
add a comment |
1
Nice, I already thought about usingsetTimeoutbut not sure how to, I will try to implement it soon
– Tho Vo
Nov 23 '18 at 19:17
1
1
Nice, I already thought about using
setTimeout but not sure how to, I will try to implement it soon– Tho Vo
Nov 23 '18 at 19:17
Nice, I already thought about using
setTimeout but not sure how to, I will try to implement it soon– Tho Vo
Nov 23 '18 at 19:17
add a comment |
I think you should mark some boolean as "waiting for data" - and as long as the data hasn't completely loaded and the updated accordingly refreshed, the scroll event will do nothing.
answered Nov 23 '18 at 16:01
ShushanShushan
1,1171814
add a comment |
I think you should mark some boolean as "waiting for data" - and as long as the data hasn't completely loaded and the updated accordingly refreshed, the scroll event will do nothing.
answered Nov 23 '18 at 16:01
ShushanShushan
1,1171814
add a comment |
I think you should mark some boolean as "waiting for data" - and as long as the data hasn't completely loaded and the updated accordingly refreshed, the scroll event will do nothing.
answered Nov 23 '18 at 16:01
ShushanShushan
1,1171814
I think you should mark some boolean as "waiting for data" - and as long as the data hasn't completely loaded and the updated accordingly refreshed, the scroll event will do nothing.
answered Nov 23 '18 at 16:01
ShushanShushan
1,1171814
answered Nov 23 '18 at 16:01
ShushanShushan
1,1171814
answered Nov 23 '18 at 16:01
ShushanShushan
1,1171814
answered Nov 23 '18 at 16:01
ShushanShushan
1,1171814
1,1171814
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.
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%2f53449604%2fstop-sending-request-if-got-the-same-data%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
