I want to use method chaining in moo tools 1.2.
My requirements are as below.
When page load complete.
My one div element say "my_div" is set to hidden visibility.
After half second its opacity set to 0.4
Then again after half second its opacity set to 0.7
Then again after half second its opacity set to 1.
So how could i do this with chaining in moo tools 1.2.
And one more this.
I could i pass the parameter when i call delay method. For example
function demo(arg1, arg2)
{
// Demo code will be here
}
So how could i call this function with delay of one second and also with passing this two arguments?
not sure why you need the gaps when you can do something like this (try it and see if it works better):
(function() {
$("foo").set("tween", {duration: 1500}).setOpacity(0).fade(1);
}).delay(500);
but if you need to do it as per your specs without a tween, then do:
(function() {
$("foo").setOpacity(.4).setStyle("visibility", "visible");
}).delay(500);
(function() {
$("foo").setOpacity(.7);
}).delay(1000);
(function(message) {
$("foo").setOpacity(1).set("html", message);
}).delay(1500, this, "hello");
no need for chaining as you are running the changes at preset times anyway, they don't need to wait on each other. but the chaining class is awesome for animations as suggested, http://mootools.net/docs/more/Class/Chain.Wait
as for params, .delay supports: (ms, bind [this etc], arguments) (as per last cycle example that changes the div's html)
How about this?
setTimeout
(
demo // function to call
, 500 // change this according to your needs
, p1 // this goes to arg1
, p2 // this goes to arg2
);
p.s. I don't know for IE and Safari, but it works on Firefox, Chrome, and Opera.
Have a look at the Chain.Wait extra: http://mootools.net/docs/more/Class/Chain.Wait
You'll need to go to http://mootools.net/more to get a custom MooTools build that includes the wait extensions.
Related
In my work, I frequently encounter following situation:
Situation A:
I need to make multiple ajax calls in one function to retrieve data from server. So I have to make callback functions and define a counter to determine whether all the calls get done.
For example , in each of the sub-functions ( with ajax calls), at the end of the done, I would callback to check the counter's value.
ajax.done(funciton(jsResponse){
.......
base.ajaxLoaded++;
base.dataLoaded();
});
then in base function, I check the value:
dataLoaded: function()
{
var _this = this;
if (_this.ajaxLoaded == 4)
{
// all loaded
_self.render();
_this.afterInit();
}
}
Situation B:
There is a modal pop up triggered by the completion of an animation. So, I have following choices:
1) make a setTimeout function with a timer ( estimated the length of animation)
something like:
setTimeout(function(){
window.MYAPP.triggerMymodal();
},1000);
2) set up a interval function to check repeatedly whether a flag's value has changed and I embedded this flag into the animation finish function, to set it true or false.
if this flag true then make my next move and kills this interval.
3) change animation div attributes and check it use interval function.
Situation C:
Use window.print() function to print something and then need detect when it's finish. This has been asked by myself in this:
how to detect window.print() finish
My Question:
In JavaScript, is there a certain kind of method or Technic to deal with those functions which have unknown execution time? or this is just a case by case thing based on what technology you use?
Yes, the modern approach to dealing with this is called Promises. Various libraries implement the concept, which is basically that you can chain together groups of things that need to happen, either is parallel or serial, and then define success and failure outcomes for each of them.
It takes a bit of time to get your head around it but once you do the code is much more straightforward.
While testing my answer to Adding HTML5 hidden attribute support to jQuery .toggle() method, I created a JSPerf test to determine how much slower .toggle(function() \[...\]) would be compared to .toggle(). To my amazement, the script with additional processing is reported to execute faster! Besides the results being counter-intuitive, I suspect a problem because I also see the toggling on the screen long after the results have returned.
How can I "fix" my test to get accurate results?
I.e.
$('button').click(function() {
$('#myElement').toggle(function() { alert("called") })
})
The callback function you pass to toggle only gets executed after the toggle action completes. In other words, it’s an asynchronous action, so if you want to measure how long it takes until the callback is fired, use jsPerf’s async/defer feature.
I've got a function called compute() that does a bunch of computations and then updates the values of an HTML table, triggered by a click() event. This is not an ajax call, just several for loops.
What I'd like to do is provide a visual indicator that the computation is running. Something like modifying the opacity of the table. I thought that something like the following could work :
$("#mytable").css("opacity", "0.5");
compute();
$("#mytable").css("opacity", "1");
But when I use this code the opacity does not seem to be modified.
Any hint on how to do this ?
Many thanks in advance !
That's because the UI is not updated between the modification of the opacity and the compute(); function. UI is updated once a while, not after every line of code (that would slow everything down).
You can use a timeout to bypass that: setTimeout(compute, 0);.
That way your UI get's updated before running compute(). You do have to put the third line, where you modify the opacity back to 1, in that function because it will run before compute() is done.
$("#mytable").css("opacity", "0.5");
setTimeout(compute, 0);
function compute() {
...
$("#mytable").css("opacity", "1");
}
It might look dirty at first, but it is a genuine way to make sure your UI is updated!
Most likely this is because your compute() function executes so quickly that you don't perceive the opacity changes.
Try to place a break-point in compute(), let us know whether the opacity changed.
All client side implementations of JavaScript are single threaded, so you can't really expect the function-call compute to carry on running while the next statement is being executed.If you want you could use a web worker, though, to sort-of spawn a background thread.
After reading your question a second time, I must say that #tomdemuyt could very well be right: it's very likely that compute executes so quickly that the opacity is changed twice in a split second, so fast that you hardly notice it changing. also, since this is an event handler, you might want to consider this:
function compute(e)
{
$(this).css({opacity:'.5'});
//rest of your code
$(this).css({opacity:'1'});
}
$('#mytable').on('click',compute);
which is just a bit more tidy IMO - it could be that this is not applicable to your code, but just in case...
Currently I am working on an plugin for jQuery. In some jQuery functions you can pass an duration (e.g. '500ms', '1s', 'fast') parameter in.
I suppose there is a function within jQuery which pares that value and returns a value in ms? (so 1s would return 1000 or something).
Which method would this be, and is it possible to use this in my own plugin? So I can fire an callback after '1s' or 'fast' like some other methods as animate currently does.
You can always have a look at the source code. There you can see that .animate() calls a method jQuery.speed which uses jQuery.fx.speeds:
speeds: {
slow: 600,
fast: 200,
// Default speed
_default: 400
},
jQuery.speed seems to be useful in this regard, though I don't see any code which converts '1s' into 1000. Are you sure jQuery is doing this?
let's take a look at jquery source :
speeds: {
slow: 600,
fast: 200,
// Default speed
_default: 400
},
So, how about slow fadeOut ? let's take a peek into the source again. It looks like 'fadeOut' is just a shortcut for custom animation. There is a nice generic block of logic that jQuery re-uses for that purpose. There's no point in pasting the whole source in here :) you can easily go to your project a see for your self.
You could implement this very easily on your own
function ms(s){
return parseInt(s) *1000;
}
alert(ms("20s")); #=> 20000
Aside from that, using 1000 compared to '1s' is hardly an inconvenience. The integer has additional benefits as it's easier to modify in a programmatic way using simple arithmetic.
So with the new ajax things we have to reinitialize our Javascript event handlers every time an ajax call is made, since an ajax call can result in pretty heavy redrawing of the whole page resulting in uninitialized objects.
Have a look at this jsfiddle:
Javascript eventhandler added multiple times to the same object
This is what I have and it seems to work, but since it is going to be used with everything we have: I wanna make sure that it is the right solution.
E.g. the global defined variable
MyCompany.field.bindedOnfocusSelector = MyCompany.field._focusEventHandler.bindAsEventListener(MyCompany.field);
just feels wrong. And it lacks the possibility to hand more function arguments.
As another poster suggested the prototype $(smth).on(event) I have problems to get it working - I remember problems crossbrowser wise (e.g. on IE 8 things didn't work which worked in Firefox) and even in this simpler example jsFiddle problem with on('focus'):
How about you register an ajax responder, and add the methods after a request has completed
Ajax.Responders.register({
onComplete: function(transport) {
MyCompany.field._initTextInputFields();
}
});
UPDATE
Ok, taking into consideration your comment, how about observing the whole page i.e. body and determining if a input event occurred, ex:
$("#body").on("focus", "input[type=text]:not([readonly])", function(event, element) {
// ....
});
I think this will help you as you only add one observer, and never need to remove it, all your logic can be contained.
PS: note that Event.on is only available in prototype 1.7
UPDATE
ok, what if you just check the click, keyboard won't work now though but i think this is a viable solution
Updated Fiddle