in this piece of code:
Vue.prototype.$navigateTo( MenuModule, {
frame : 'basement' ,
backstackVisible : true ,
transition : {
name : "slideTop",
duration : 300 ,
}
} )
how can I run a function that belongs to the MenuModule after the navigation is FULLY COMPLETED (after 300ms : duration).
I'm not looking for "setTimeout" method, cause using that seems cause some UI problems, (the animation for navigating takes sometimes a bit longer than 300ms, so I would like to detect prefect timing to run a function right after that it is FULLY NAVIGATED to the module).
Use mounted() event on MenuModule to trigger the function.
Related
I'm trying to poll an endpoint with varying refreshIntervals. For instance, it starts with 5 seconds and then it changes to 10 seconds by pressing a button in the UI.
I'm using swrv but I'm not able to create a dependency that triggers the refreshInterval to change. How could I do this?
I assumed it should look something like this and I'd put a dependency somewhere:
const { data, error } = useSWRV("some key", fetcher, {
refreshInterval: <dynamic value>,
});
I tried to make a repeated animation, and at first I use the setInterval() to achieve this , but the result seems not well because there is a small break between animations.
And I tried to use the callback in start() :
_rotate(){
this.state.rotation.setValue(0)
Animated.timing(
this.state.rotation,
{
duration:this.speed,
toValue:1,
}
).start( this._rotate.bind(this) )
}
Expected a continuously animation , but the result is just like the situation when using setInterval().
And, when there is no callback in start() , I can use
this.state.rotation.stopAnimation()
to stop the animation. But with the callback , it does not work.
Maybe I missed something. Anyone helps?
After digging into the source code, it seems that Facebook need to do more on the react-native document.
The callback in start should be like this:
//AnimatedImplementation.js
type EndCallback = (result: EndResult) => void;
So , I changed my code to:
_rotate(result){
this.state.rotation.setValue(0)
Animated.timing(
this.state.rotation,
{
duration:this.speed,
toValue:1,
}
).start( this._rotate.bind(this,result) )
}
Then, the problem is gone....
I don't quite get the idea behind enquire.js' "setup" handler.
Case:
I want to load content through ajax once when you're not in a small viewport (lt 600px).
Naturally I would do enquire.register('(min-width: 600px)', { setup: myFunction });.
Problem:
Now I tested this multiple times but the setup handler also gets fired when you're in a small screen, which totally eliminates the benefit of the setup handler imo, because you would want to only load the ajax content once you enter a viewport bigger than 600px, wouldn't you?
See example jsfiddle.
Conclusion:
So actually I wouldn't even need the setup handler because I simply could load the content outside the enquire register and would have the same effect. (Which of course isn't what I want...)
Can someone tell me if I just misunderstood the purpose of setup or is there something I'm missing?
Combine with the deferSetup flag to defer the setup callback until the first match. This example illustrates the feature:
enquire.register(someMediaQuery, {
setup : function() {
console.log("setup");
},
deferSetup : true,
match : function() {
console.log("match");
},
unmatch : function() {
console.log("unmatch");
}
});
You can see a working example here: http://wicky.nillia.ms/enquire.js/examples/defer-setup/
I'm building a Google Maps app, and have an image of a compass outside of the map. Each of the compass points is on an image map, and has its own id. I want the 45° orientation to change, depending on the compass point clicked.
Within the google maps initialize function, I have this line:
google.maps.event.addDomListener(document.getElementById('compassSouth'), 'click', map.setHeading(180));
However, that handler is fired on page load, and doesn't respond after that. It's not due to the image map - the same behavior happens if the element is a button.
I have another handler in the same format that responds to a button press, which works fine.
The code is doing exactly what you are telling it to do: It is calling the map.setHeading(180) function immediately when you execute your code.
Let's write it out line by line for clarity:
var element = document.getElementById('compassSouth');
var listener = map.setHeading( 180 );
google.maps.event.addDomListener( element, 'click', listener );
As you can see, this code calls map.setHeading(180) immediately where you write that code, and then it passes the return value from that function (which I'm now calling listener) into addDomListener().
But map.setHeading(180) doesn't return any value at all - or put another way, it returns undefined, so listener is undefined.
addDomListener() sees that undefined value and ignores it: it doesn't set any listener at all!
What you need to do instead is pass a reference to a function into addDomListener(). You could do this easily like this:
function compassClick() {
map.setHeading( 180 );
}
var element = document.getElementById('compassSouth');
google.maps.event.addDomListener( element, 'click', compassClick );
Or as you'll often see, you can make that compassClick function an anonymous function instead (now going back to code more like your original):
google.maps.event.addDomListener(
document.getElementById('compassSouth'), 'click',
function() {
map.setHeading( 180 );
}
);
Worklight busyindicator not working properly.My isssue is i'm using multipage.On page change i call adapter for webservice and call busy indicator so that it show work in progress while fetching.but what happen is page change and indicator show and hide quickly but adpater still in fetching phase and after sometime data called successfully but during these working no busy indicator shows.
var busyIndicator = null;
function wlCommonInit(){
busyIndicator = new WL.BusyIndicator();
}
This is the code i call on page change.
busyIndicatorDemo();
var viewPath = "views/add_fund_transfer.html";
WL.Page.load(viewPath,
{
onComplete: function() {
PayAnyOne_Controller.GetBranches(GetBranchesProcedureName);
busyIndicator.hide();
}
});
function busyIndicatorDemo() {
busyIndicator.show();
setTimeout(15000);
}
its seems like busyindicator doesn't work with adpater when using in multipage.
Please give me the solution or the problem in my code.
Thanks.
It seems like the problem is in the flow of the code. you're running this code basically:
show busy indicator
load page
when page has finished loading: invoke procedure (async call), and hide busyindicator.
So this generates the behavior you've reported - the busyindicator is shown and quickly hidden once the page has finished loading, even though the service is still fetching data (in an async call)
moving the busyindicator.hide to the onSuccess of the invoke procedure should solve the problem (put it also in the onFailure ...)
Hope this helps