Often you wish to use setTimeout to call a function in the objects you are creating with MooTools or perhaps even more often you would like to pass parameters into your set time out calls. Well, the MooTools framework has given us a plethora of tools to
do all of this and more. In this post I will discuss how you can pass parameters with setTimeout (Well, not really ‘into’ setTimeout, but a better way to get the same result.) and call your functions, delayed and recurring, from your objects created with the
MooTools class function.
Closures and bind()
The first problem we tend to encounter the first time we try to do this is that when our member function gets called by setTimeout we get a bunch of errors that our variables are undefined. This problem is caused by JavaScript’s lack of closures which means
that there is not hard binding between the function and the object that it is declared in. If you do a little debugging you will discover that the this operator is pointing at the window object not your object. The reason for that is that setTimeout causes
the function to be called by the window object and in JavaScript this points to the calling scope.
Because the issue of closures is a problem in many cases when using JavaScript MooTools came up with a generic solution to the problem called bind. The bind() method is a part of the functions.js, found in the Native collection of MooTools functions. Their
docs on bind can be found here. The Bind() member function will allow you to bind the this operator to any object you choose, which often will be the this of the object you define it in, but could be any object in the DOM. You can use bind when you call set
time out like setTimeout(this.myfunction.bind(this), 1000) to call functions in your object delayed and have still have the this operator point at what you expect it to. That having been said, MooTools has two other functions to help you with delayed and recurring
function calls in a much more efficient manner.
Delayed and Recurring calls
As this is an article about setTimeout, you are most likely unconcerned with what closures are and are just wanting your delayed function or recurring/polling/periodic function to work. If so, this is the section for you! The MooTools library provides two
functions for calling functions, either delayed or periodically. They are, not surprisingly, called ‘delay’ and ‘periodical’. You use delay when you want a function to execute in so many seconds or periodical when you want a function to execute every so many
seconds. Both of these functions return their timer ID and can be stopped by passing that into the $clear() function.
Delay example:
periodical example:
Passing Parameters
Another important feature of bind, delay and periodical is that they will allow you to pass parameters or arguments to the functions they call. Passing arguments to a function called with bind, delay or periodical is as easy as adding a second parameter
for bind and, in the case of delay and periodical, a third parameter that is an array of parameter values; e.g., myfunction.periodical(1000, this, [ParamVal1, ParamVal2, "strParamVal3"]) or myfunction.bind(this, [ParamVal1, ParamVal2, "strParamVal3"]).
Common Errors Encountered
There are some situations where you might get an error that does not really explain what the problem is. I have run into two when working with these functions. The first is the “too much recursion” error from Firefox or FireBug. This error indicates that
you have used the parenthesis in a place you should not have, an example is using myfunction().delay(1000, this) instead of myfunction.delay(1000, this). The other is having a function that calls periodical that calls its self, which will cause an exponential
increase in the number of calls to that function until your browser locks up.
periodical lockup example:
MooTools has neatly provided simple ways to accomplish all of the tasks we would normally use setTimeout for.
分享到:
相关推荐
setTimeout()从载入后延迟指定的时间去执行一个表达式或者是函数;仅执行一次 ;和window.clearTimeout一起使用.我在 代码如下:$(document).ready(function(){setTimout(test(),200); function test() { alert(1&#...
主要介绍了解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
setTimeout 描述 setTimeout(code,millisec) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。 注:调用过程中,可以使用clearTimeout(id_of_settimeout)终止 参数 描述 code 必需,要调用的...
给c#添加SetTimeout和SetInterval函数.docx
使用javascript方法settimeout()函数来定时跳转页面。
使用SetInterval和设定延时函数setTimeout 很类似。setTimeout 运用在延迟一段时间,再进行某项操作。
Javascript定时器(二)——setTimeout与setInterval 在 http://www.cnblogs.com/strick/p/3983904.html 有说明
java后台定时器最简单用法实例,类似于js里的setTimeOut
NULL 博文链接:https://rainbow702.iteye.com/blog/1668935
关于JS定时器(setTimeout setInterval)定时不准问题1
使用setTimeout()方法模拟进度条
围绕setTimeout的一个微型(28字节)Promise封装
setTimeout,javascript 延时执行函数,闭包处理 利用javascript闭包处理延时操作
一款很帅气的插件实现的
setTimeout制作36选7 setTimeout制作36选7 setTimeout制作36选7 setTimeout制作36选7
JavaScript_window.setTimeout()_的详细用法
setInterval setTimeout.html
JS中的setTimeout和setInterval的区别JS中的setTimeout和setInterval的区别JS中的setTimeout和setInterval的区别
04-setTimeout.html
在学习的过程中,分享自己所学难点。同时向初级学者提供自己的想法与看法,希望可以在自己学习的过程中,帮助其他初学的人,让我们能够共同进步,希望我所上传的内容,能够帮助你的学习,更希望在你面试的时候能够...