I am working on one project where we are using search bar to search data from server and for that we are calling API on every character type.
Due to that if user types 10-20 characters in search bar it will call 20 requests.
Among 19 request no required at all so I want to cancel all perior request from advanced HTTP plugin in ionic 3.
Is there any way to cancel that request which is already in process ?
I am using below code for HTTP call:
this.httpPlugin.setRequestTimeout(60);
// this.httpPlugin.setHeader("content-type", "application/json");
this.httpPlugin.setHeader('authorization', "Bearer " + token);
console.log('Requested URL :-', this.url + 'faqmsDetails/faList?caseNum=' + searchText);
this.httpPlugin.get(this.url + searchText, {}, {}).then((response) => {
console.log("Response Success : " + JSON.stringify(response));
let jsonResponse = JSON.parse(response.data);
console.log("JSON OBJECT RESPONSE : " + jsonResponse);
resolve(jsonResponse);
}).catch(error => {
reject(error);
});
I search a lot but didn't find any fruitful solution.
for Search delay i have used debounce property of searchebar which will help me to delay in search while user typing but still some request are unwanted in process so I want to cancel that requests.
Let me know if any one have any solution or suggestions.
debounce is what you need in the auto-search case. The tail input will be considered as the confirmed input, exactly same as submit button clicking, even though it turns out be unwanted eventually.
I'm not familiar with the httpPlugin underneath. If based on XMLHttpRequest, it is cancelable. If based on fetch API, it is not cancelable. Anyway you can cast the unwanted requests away.
One much more graceful solution is to introduce rxjs. See https://github.com/Reactive-Extensions/RxJS/blob/master/examples/autocomplete/autocomplete.js
Update:
Got stuck with controlling these event streams. I think rxjs is worth in this case.
<!doctype html>
<html>
<head>
<script src="https://cdn.bootcss.com/rxjs/5.4.3/Rx.js"></script>
</head>
<body>
<input />
<button>clear</button>
<span id="result"></span>
<script>
function searchData(keyword) {
console.log('to search: ' + keyword)
return new Promise(resolve => {
if (keyword) {
setTimeout(() => resolve('result of ' + keyword), 2000)
} else {
resolve('cleared')
}
})
}
const input = document.querySelector('input')
const clear = document.querySelector('button')
const result = document.getElementById('result')
const input$ = Rx.Observable.fromEvent(input, 'keyup')
.map(e => e.target.value)
.debounceTime(300)
const clear$ = Rx.Observable.fromEvent(clear, 'click')
.map(() => {
input.value = ''
return ''
})
const search$ = Rx.Observable.merge(input$, clear$)
.distinctUntilChanged()
.switchMap(searchData)
.subscribe(data => {
result.innerHTML = data
console.log(data)
})
</script>
</body>
</html>
Related
I'm new to RTK query and I'm having issues with it sharing data across queries with different args.
// api.js
const { useGetStuffQuery } = api.injectEndpoints({
endpoints: (builder) => ({
getStuff: builder.query({
query: (stuffId) => ({ url: `http://some.random-url.com/${stuffId}` }),
}),
}),
});
// component.js
function(props) {
const [id, setId] = useState(1);
const { data, isLoading } = useGetStuffQuery(id);
if (val === '2') {
console.log('datttt', data); // this initially prints data from id:1
}
return <div>
<input value={id} onChange={(e) => setId(e.target.value)} />
{
isLoading ? <span>loading...</span>
: <span>data is: {data}</span>
}
</div>
}
I was expecting to see the loading indicator to show up once I changed the id from 1 to 2.
However, it seems like rtkQuery is still using the cached data from my previous useGetStuffQuery(1) call and hence I see the data for id1 momentarily. Once the request for id2 is resolved -- it does update and rerender my component.
Is this caching behavior intentional and expected? Or am I missing something?
It is intentional, there are isLoading and isFetching that are behaving different (isLoading until there is data, isFetching while any request is running) and for convenience the hook will always give you the last data that was known so your UI jumps less.
This is explained in the "Query Loading State" docs section:
isLoading refers to a query being in flight for the first time for the given endpoint + query param combination. No data will be available at this time.
isFetching refers to a query being in flight for the given endpoint + query param combination, but not necessarily for the first time. Data may be available from an earlier request at this time.
I'm using both client and server from node-opcua, it's working fine apart for error management on the server side when the client tries to write a value and something goes wrong. In order to improve that, I'd like to have an asynchronous setter like in this example:
const wantedValue = namespace.addAnalogDataItem({
componentOf: node,
browseName: `${chamber}${folder}Req`,
nodeId: `s=${chamber}${folder}Req`,
dataType: "Double",
engineeringUnits: settings.unit,
engineeringUnitsRange: settings.range,
value: {
get: () => new Variant({dataType: DataType.Double, value: wrapper.readProgram(chamber, folder)}),
set: async (variant: Variant) => {
const success = await wrapper.writeProgram(chamber, folder, variant.value)
return success ? StatusCodes.Good : StatusCodes.Bad
}
}
})
This naive approach lead to a typer error:
throw new Error("Cannot find StatusCode " + statusCode);
Is there a better way to do that ?
the get and set lambdas are design to be synchronous.
you need to use the callback form with timestamped_get and timestamped_set to achieve what you need.
Authenticate with Firebase with a Phone Number (JS) requires a mandatory reCAPTCHA verifier, it takes the ID of the container. For the ID of the container, I am generating a random one -
firebase_recaptcha_container: "recaptcha-container",
firebase_recaptcha_reset: function() {
if (typeof appVerifier != "undefined") {
appVerifier.reset()
appVerifier.clear()
}
let id = loadJS.firebase_recaptcha_container
let newID = loadJS.randomString(10)
$("#"+id).contents().remove()
$("#"+id).prop("id", newID)
loadJS.firebase_recaptcha_container = newID
return newID
}
then requesting for the RecaptchaVerifier and upon receiving I set this as a global variable window.appVerifier .
firebase_recaptcha: function(name_r="default") {
let promiseD = new firebase.auth.RecaptchaVerifier(name_r, {
'size': 'invisible',
'callback': function(response) {
resolve(response)
},
'expired-callback': function(r) {
console.log("expired", r)
},
'isolated' : false
});
return promiseD
},
_____________________
let container_recaptcha = $utils.firebase_recaptcha_reset()
window.appVerifier = await $utils.firebase_recaptcha(container_recaptcha)
It works totally fine for the very first time. But its a honest mistake for users not to use correct phone number. So for next time, I am doing the same thing again and getting error while generating the RecaptchaVerifier -
reCAPTCHA has already been rendered in this element
Which sadly does not make sense as the new element is totally different and also clear, reset methods were called following the documentation. I am neither using any other reCaptcha on this page. Refreshing the page might be a possible solution but that I really hate. Any insight would be helpful.
Thanks!
Finally found the solution, looks like it was a stupid mistake!
Invoking firebase.auth.RecaptchaVerifier adds new recaptcha scripts, every time! Hence all needed to be done is, calling it once, it does the rest on its own.
This won't get fixed just by implementing recaptchaVerifier.clear() method.
In the callback where you are passing this appVerifier, you'll have to implement the above clear method and add that "recaptcha-container" using ref
The below would be the element in render method:
<div ref={recaptchaWrapperRef}>
<div id="recaptcha-container"></div>
</div>
GenerateCaptcha function:
const generateRecaptcha = () => {
appVerifier = new RecaptchaVerifier(
"recaptcha-container",
{
size: "invisible",
},
authentication
);
Inside submit Callback:
if (appVerifier && recaptchaWrapperRef.current) {
appVerifier.clear();
recaptchaWrapperRef.current.innerHTML = `<div id="recaptcha-container"></div>`;
}
// Initialize new reCaptcha verifier
generateRecaptcha();
I've been scratching my head as to why this code will work some of the time, but not all (or at least most of the time). I've found that it actually does run displaying the correct content in the browser some of the time, but strangely there will be days when I'll come back to the same code, run the server (as per normal) and upon loading the page will receive an error in the console: TypeError: 'undefined' is not an object (evaluating 'Session.get('x').html')
(When I receive that error there will be times where the next line in the console will read Error - referring to the err object, and other times when it will read Object - referring the data object!?).
I'm obviously missing something about Session variables in Meteor and must be misusing them? I'm hoping someone with experience can point me in the right direction.
Thanks, in advance for any help!
Here's my dummy code:
/client/del.html
<head>
<title>del</title>
</head>
<body>
{{> hello}}
</body>
<template name="hello">
Hello World!
<div class="helloButton">{{{greeting}}}</div>
</template>
My client-side javascript file is:
/client/del.js
Meteor.call('foo', 300, function(err, data) {
err ? console.log(err) : console.log(data);
Session.set('x', data);
});
Template.hello.events = {
'click div.helloButton' : function(evt) {
if ( Session.get('x').answer.toString() === evt.target.innerHTML ) {
console.log('yay!');
}
}
};
Template.hello.greeting = function() {
return Session.get('x').html;
};
And my server-side javascript is:
/server/svr.js
Meteor.methods({
doubled: function(num) {
return num * 2;
},
foo: function(lmt) {
var count = lmt,
result = {};
for ( var i = 0; i < lmt; i++ ) {
count++;
}
count = Meteor.call('doubled', count);
result.html = "<em>" + count + "</em>";
result.answer = count;
return result;
}
});
I think it's just that the session variable won't be set yet when the client first starts up. So Session.get('x') will return undefined until your method call (foo) returns, which almost certainly won't happen before the template first draws.
However after that it will be in the session, so things will probably behave right once you refresh.
The answer is to just check if it's undefined before trying to access the variable. For example:
Template.hello.greeting = function() {
if (Session.get('x')) return Session.get('x').html;
};
One of the seven principles of Meteor is:
Latency Compensation. On the client, use prefetching and model simulation to make it look like you have a zero-latency connection to the database.
Because there is latency, your client will first attempt to draw the lay-out according to the data it has at the moment your client connects. Then it will do the call and then it will update according to the call. Sometimes the call might be able to respond fast enough to be drawn at the same time.
As now there is a chance for the variable to not be set, it would throw an exception in that occasion and thus break down execution (as the functions in the call stack will not continue to run).
There are two possible solutions to this:
Check that the variable is set when using it.
return Session.get('x') ? Session.get('x').html : '';
Make sure the variable has an initial value by setting it at the top of the script.
Session.set('x', { html = '', answer = ''});
Another approach would be to add the templates once the call responds.
Meteor.call('foo', 300, function(err, data) {
Session.set('x', data);
$('#page').html(Meteor.ui.render(function() {
return Template.someName();
}));
});
I have a website which is using Google Analytics newer asynchronous tracking method (_gaq). The problem I've run into is that I want to institute some specific link tracking and am worried that I will be creating a race condition.
Basically, it's a news website so it has headlines which link to stories all over the place. A headline for a story might appear in 3 different places on a page, and appear on hundreds of other pages. Thus, in order to understand how our audience is interacting with the site we have to track how each specific headline block is used, and not just the destination. Because of those two stipulations tracking individual pages, nor tracking referred pages won't be enough, we have to track individual links.
So if I have a link.
Here
Because _gaq.push() is an asynchronous call, isn't it possible that the page change will occur prior to Google's completion of the click tracking? If so is there a way to prevent that, or do I have a misunderstanding about the way that Google Analytics Async functions (http://code.google.com/apis/analytics/docs/tracking/asyncUsageGuide.html).
You're right. If the browser leaves the page before it sends the GA tracking beacon (gif hit) for the event, the event will not be recorded. This is not new to the async code however, because the process of sending the tracking beacon is asynchronous; the old code worked the same way in that respect. If tracking is really that important, you could do something like this:
function track(link) {
if (!_gat) return true;
_gaq.push(['_trackEvent', 'stuff']);
setTimeout(function() {location.href=link.href'}, 200);
return false;
}
...
This will stop the browser from going to the next page when the link is clicked if GA has been loaded already (it's probably best to not make the user wait that long). Then it sends the event and waits 200 milliseconds to send the user to the href of the link they clicked on. This increases the likelihood that the event will be recorded. You can increase the likelihood even more by making the timeout longer, but that also may be hurting user-experience in the process. It's a balance you'll have to experiment with.
I've got this problem too, and am determined to find a real solution.
What about pushing the function into the queue?
// Log a pageview to GA for a conversion
_gaq.push(['_trackPageview', url]);
// Push the redirect to make sure it happens AFTER we track the pageview
_gaq.push(function() { document.location = url; });
From Google's documentation for universal analytics (new version since most other answers for this question). You can now easily specify a callback.
var trackOutboundLink = function(url) {
ga('send', 'event', 'outbound', 'click', url, {'hitCallback':
function () {
document.location = url;
}
});
}
For clarity I'd recommend using this syntax, which makes it clearer which properties you're sending and easier to add more :
ga('send', 'event', {
'eventCategory': 'Homepage',
'eventAction': 'Video Play',
'eventLabel': label,
'eventValue': null,
'hitCallback': function()
{
// redirect here
},
'transport': 'beacon',
'nonInteraction': (interactive || true ? 0 : 1)
});
[Here's a complete list of parameters for all possible ga calls.]
In addition I've added the transport parameter set to beacon (not actually needed because it's automatically set if appropriate):
This specifies the transport mechanism with which hits will be sent.
The options are 'beacon', 'xhr', or 'image'. By default, analytics.js
will try to figure out the best method based on the hit size and
browser capabilities. If you specify 'beacon' and the user's browser
does not support the navigator.sendBeacon method, it will fall back
to 'image' or 'xhr' depending on hit size.
So when using navigator.beacon the navigation won't interrupt the tracking . Unfortunately Microsoft's support for beacon is non existent so you should still put the redirect in a callback.
In event handler you should setup hit callback:
_gaq.push(['_set', 'hitCallback', function(){
document.location = ...
}]);
send you data
_gaq.push(['_trackEvent'
and stop event event processing
e.preventDefault();
e.stopPropagation();
I'm trying out a new approach where we build the URL for utm.gif ourselves, and request it, then only once we've received the response (the gif) we send the user on their way:
Usage:
trackPageview(url, function() { document.location = url; });
Code (CrumbleCookie from: http://www.dannytalk.com/read-google-analytics-cookie-script/)
/**
* Use this to log a pageview to google and make sure it gets through
* See: http://www.google.com/support/forum/p/Google%20Analytics/thread?tid=5f11a529100f1d47&hl=en
*/
function trackPageview(url, fn) {
var utmaCookie = crumbleCookie('__utma');
var utmzCookie = crumbleCookie('__utmz');
var cookies = '__utma=' + utmaCookie + ';__utmz=' + utmzCookie;
var requestId = '' + (Math.floor((9999999999-999999999)*Math.random()) + 1000000000);
var hId = '' + (Math.floor((9999999999-999999999)*Math.random()) + 1000000000);
var utmUrl = 'http://www.google-analytics.com/__utm.gif';
utmUrl += '?utmwv=4.8.9';
utmUrl += '&utmn=' + requestId;
utmUrl += '&utmhn=' + encodeURIComponent(window.location.hostname);
utmUrl += '&utmhid=' + hId;
utmUrl += '&utmr=-';
utmUrl += '&utmp=' + encodeURIComponent(url);
utmUrl += '&utmac=' + encodeURIComponent(_gaProfileId);
utmUrl += '&utmcc=' + encodeURIComponent(cookies);
var image = new Image();
image.onload = function() { fn(); };
image.src = utmUrl;
}
/**
* #author: Danny Ng (http://www.dannytalk.com/read-google-analytics-cookie-script/)
* #modified: 19/08/10
* #notes: Free to use and distribute without altering this comment. Would appreciate a link back :)
*/
// Strip leading and trailing white-space
String.prototype.trim = function() { return this.replace(/^\s*|\s*$/g, ''); }
// Check if string is empty
String.prototype.empty = function() {
if (this.length == 0)
return true;
else if (this.length > 0)
return /^\s*$/.test(this);
}
// Breaks cookie into an object of keypair cookie values
function crumbleCookie(c)
{
var cookie_array = document.cookie.split(';');
var keyvaluepair = {};
for (var cookie = 0; cookie < cookie_array.length; cookie++)
{
var key = cookie_array[cookie].substring(0, cookie_array[cookie].indexOf('=')).trim();
var value = cookie_array[cookie].substring(cookie_array[cookie].indexOf('=')+1, cookie_array[cookie].length).trim();
keyvaluepair[key] = value;
}
if (c)
return keyvaluepair[c] ? keyvaluepair[c] : null;
return keyvaluepair;
}
Using onmousedown instead of onclick may also help. It doesn't eliminate the race condition, but it gives GA a head start. There's also the concern of someone clicking on a link and dragging away before letting go of the mouse button, but that's probably a negligible case.