前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >js中setTimeout的用法和JS计时器setTimeout与setInterval方法的区别和confirm方法

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

作者头像
用户7657330
发布2020-08-14 16:24:34
3.1K0
发布2020-08-14 16:24:34
举报
文章被收录于专栏:程序生涯
代码语言:javascript
复制
setTimeout()在js类中的使用方法  
setTimeout (表达式,延时时间)
setTimeout(表达式,交互时间)
延时时间/交互时间是以豪秒为单位的(1000ms=1s)
setTimeout  在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次
setTimeout 在执行时,它从载入后,每隔指定的时间就执行一次表达式
代码语言:javascript
复制
1,基本用法:

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

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

setTimeout有两种形式
setTimeout(code,interval)
 
setTimeout(func,interval,args)
代码语言:javascript
复制
其中code是一个字符串

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

比如你想周期性执行一个函数
代码语言:javascript
复制
function a(){

      //...

}
代码语言:javascript
复制
可写为
代码语言:javascript
复制
setTimeout("a()",1000)
代码语言:javascript
复制
或者
代码语言:javascript
复制
setTimeout(a,1000)
代码语言:javascript
复制
这里注意第二种形式中,是a,不要写成a(),切记!!!

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

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

呵呵。让我们来分析一下:  
代码语言:javascript
复制
 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();
代码语言:javascript
复制
错误分析:

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

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

    D:将变量self指向当前实例对象,这样js解析引擎就不会混肴this指的是谁了。
代码语言:javascript
复制
 话说回来,虽然我们知道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().

例子如下:
代码语言:javascript
复制
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); 
}
代码语言:javascript
复制
定义和用法

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

confirm(message)

参数

描述

message

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

说明

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

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

提示和注释

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

实例
代码语言: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>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019/09/11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档