js中setTimeout的用法和JS计时器setTimeout与setInterval方法的区别和confirm方法

时间:2022-07-23
本文章向大家介绍js中setTimeout的用法和JS计时器setTimeout与setInterval方法的区别和confirm方法，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。
setTimeout()在js类中的使用方法  
setTimeout (表达式,延时时间)
setTimeout(表达式,交互时间)
延时时间/交互时间是以豪秒为单位的(1000ms=1s)
setTimeout  在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次
setTimeout 在执行时,它从载入后,每隔指定的时间就执行一次表达式
1，基本用法：

执行一段代码： 
var i=0;
setTimeout("i+=1;alert(i)",1000);
执行一个函数：
var i=0;
setTimeout(function(){i+=1;alert(i);},1000);
//注意比较上面的两种方法的不同。

下面再来一个执行函数的：
var i=0;
function test(){
	i+=1;
    alert(i);
}
setTimeout("test()",1000);
也可以这样：
setTimeout(test,1000);
总结：
setTimeout的原型是这样的：
iTimerID = window.setTimeout(vCode, iMilliSeconds [, sLanguage])

setTimeout有两种形式
setTimeout(code,interval)
 
setTimeout(func,interval,args)
其中code是一个字符串

func是一个函数.
注意"函数"的意义,是一个表达式,而不是一个语句.

比如你想周期性执行一个函数
function a(){

      //...

}
可写为
setTimeout("a()",1000)
或者
setTimeout(a,1000)
这里注意第二种形式中,是a,不要写成a(),切记!!!

展开来说,不管你这里写的是什么,如果是一个变量,一定是一个指向某函数的变量;如果是个函数,那它的返回值就  要是个函数 
var i=0;
 
    function xilou(){
 
        i+=1;
 
        if(i>10){alert(i);return;}
 
        setTimeout("xilou()",1000);
 
        //用这个也可以
 
        //setTimeout(xilou,1000);
 
    }
3,在类中使用setTimeout

    终于到正题了，其实在类中使用大家遇到的问题都是关于this的，只要解决了这个this的问题就万事无忧了。

呵呵。让我们来分析一下：  
 function xilou(){
 
        this.name="xilou";
 
        this.sex="男";
 
        this.num=0;
 
    }
 
    xilou.prototype.count=function(){
 
        this.num+=1;
 
        alert(this.num);
 
        if(this.num>10){return;}
 
        //下面用四种方法测试,一个一个轮流测试。
 
        setTimeout("this.count()",1000);//A:当下面的x.count()调用时会发生错误：对象不支持此属性或方法。
 
        setTimeout("count()",1000);//B:错误显示：缺少对象
 
        setTimeout(count,1000);//C:错误显示：'count'未定义
 
        //下面是第四种
 
        var self=this;
 
        setTimeout(function(){self.count();},1000);//D:正确
 
       
 
    }
 
   
 
    var x=new xilou();
 
    x.count();
错误分析：

    A：中的this其实指是window对象，并不是指当前实例对象

    B：和C：中的count()和count其实指的是单独的一个名为count()的函数,但也可以是window.count(),因为window.count()可以省略为count()

    D：将变量self指向当前实例对象，这样js解析引擎就不会混肴this指的是谁了。
 话说回来，虽然我们知道setTimeout("this.count()",1000)中的this指的是window对象，但还是不明白为什么会是

    window对象^_^(有点头晕...)

    那我们可以想象一下这个setTimeout是怎样被定义的：

    setTimeout是window的一个方法，全称是这样的：window.setTimeout()

    那应该是这样被定义的：   
	
	window.setTimeout=function(vCode, iMilliSeconds [, sLanguage]){
 
        //.....代码
 
        return timer//返回一个标记符
 
    }


所以当向setTimeout()传入this的时候，当然指的是它所属的当前对象window了。 

计时器setTimeout()与setInterval()是原生JS很重要且用处很多的两个方法, 但很多人一直误以为是相同的功能: 间隔时间重复执行传入的句柄函数. 但实际上, 并非如此, 既然JS给出了两个不同的命名, 肯定有其迥异之处.

先来看看两者JS手册及英文词典上的解释:

JS手册»setTimeout() : 用于在指定的毫秒数后调用函数或计算表达式;

英文释义»timeout() : 超时；暂时休息；工间休息;

JS手册»setInterval() : 按照指定的周期(以毫秒计)来调用函数或计算表达式. 会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭;

英文释义»interval() : 间隔；间距；幕间休息;

不难看出, 只要我们仔细体会JS手册及命名释义, 就能很容易的区分开两者的区别. 简单的说, 两才的区别在于, setTimeout()方法是在等待指定时间后执行函数, 且只执行一次传入的句柄函数. setInterval()方法是每指定间隔时间后执行一次传入的句柄函数,循环执行直至关闭窗口或clearInterval().

例子如下：
var timeout=function(){ 
    alert('等待2s后弹出,仅此一次!在等待时间内clearTimeout可停止执行!') 
} 
var interval=function(){ 
    alert('每2s循环弹出,直至clearInterval或关闭窗口!') 
} 
var input=document.getElementsByTagName('input'); 
var clearTimeoutFun=null; 
var clearIntervalFun=null; 
input[0].onclick=function(){ 
    clearTimeoutFun=setTimeout(timeout,2000); 
} 
input[1].onclick=function(){ 
    clearTimeout(clearTimeoutFun); 
} 
input[2].onclick=function(){ 
    clearIntervalFun=setInterval(interval,2000); 
} 
input[3].onclick=function(){ 
    clearInterval(clearIntervalFun); 
}
定义和用法

confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。
语法

confirm(message)

参数

描述

message

要在 window 上弹出的对话框中显示的纯文本（而非 HTML 文本）

说明

如果用户点击确定按钮，则 confirm() 返回 true。如果点击取消按钮，则 confirm() 返回 false。

在用户点击确定按钮或取消按钮把对话框关闭之前，它将阻止用户对浏览器的所有输入。在调用 confirm() 时，将暂停对 JavaScript 代码的执行，在用户作出响应之前，不会执行下一条语句。

提示和注释

提示：对话框按钮的文字是不可改变的，因此请小心地编写问题或消息，使它适合用确认和取消来回答。

实例
<html> 
<head> 
<script type="text/javascript"> 
function disp_confirm() { 
var r=confirm("Press a button") 
if (r==true) { 
document.write("You pressed OK!") 
} else { 
document.write("You pressed Cancel!") 
} 
} 
</script> 
</head> 
<body> 
input type="button" onclick="disp_confirm()" value="Display a confirm box" />
 </body> 
</html>

随机文章
Javascript知识点必读
最近更新