当前位置:Gxlcms > JavaScript > Javascript&DHTML实例编程(教程)(四)初级实例篇2—动画_基础知识

Javascript&DHTML实例编程(教程)(四)初级实例篇2—动画_基础知识

时间:2021-07-01 10:21:17 帮助过:20人阅读

上篇说了动态创建结点和删除结点的例子,这一篇说一些如何用setInterval和setTimeout做简单的动画。
语法皆是window.setTimeout(fn, delay), window.setInterval(fn, delay)
fn可以是一个函数名,也可以是一个执行的字符串,但要注意的是,如果fn是一个可以执行的字符串,且有参数,如window.setInterval("myFunction(obj)",1000)将可能抛出一个异常,这个时候,通常是你要传递一个对象参数,我建议用这样的一个办法来解决,也建议使用这种方法来使用window.setTimeout和window.setInterval:

window.setInterval(function (){
myFunction(obj);},1000);

还有一种情况就是在一个"class"里,即要执行this.myFunction(obj)如何实现呢?


function jsclass() {};
jsclass.prototype.init = function (obj) {
var self = this; //创建一个this指针的引用
window.setInterval(function(obj) {
self.myFunction(obj);},1000);
};
jsclass.prototype.myFunction = function (obj) {
//TODO
};

DHTML的全局方法setInterval和setTimeout,所谓全局,即在window层,不属于DHTML的DOM元素的方法里,这两个有一些区别,网上也有很多说明,也就是setInterval是循环执行一个指定函数,setTimeout是只执行一次。例外说明一点,属于window层次的,可以在前面不加window,即可以用window.setInterval也可以直接用setInterval。

它们都返回一个数字型的timerId,用于cleaverInterval/clearTimeout方法,从setInterval/setTimeout中返回。如果做过桌面应用的朋友,可以把这个setInterval和setTimeout假想成创建一个线程,而timerId则是一个线程Id,而cleaverInterval/clearTimeout方法则是消毁这个线程。也许这样可以更好的理解这两个方法。

(在具体的应用中,我更驱向于用setTimeout。)

知道这两个方法的功能,先来写一个简单的例子:

一个一秒后弹出的alert对话框。