您的位置：首页 > Web前端 > JavaScript

Javascript的setTimeout详细用例

2016-03-02 15:40 676 查看

先简单写一个用setTimeout和clearInterval配合写的例子

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="getCodes" onclick="getCodes()">获取验证码</button>
<button id="reciprocal" style="display: none;">倒计时</button>
</body>
<script>
function getCodes() {
document.getElementById('reciprocal').style.display = 'block';
document.getElementById('getCodes').style.display = 'none';
var time = 60;
var reciprocal = window.setInterval(function() {
console.log(time);
if (time > 0) {
document.getElementById('reciprocal').innerHTML = time;
time--;
} else {
document.getElementById('getCodes').style.display = 'block';
document.getElementById('reciprocal').style.display = 'none';
window.clearInterval(reciprocal);
}
}, 1000);
document.getElementById('reciprocal').innerHTML = '获取成功';
alert('获取成功');
}
</script>
</html>

setInterval传递了一个匿名的函数，当然这个匿名函数可以把它写出来例如这样：

var reciprocal = window.setInterval(setI, 1000);
function setI() {
console.log(time);
if (time > 0) {
document.getElementById('reciprocal').innerHTML = time;
time--;
} else {
document.getElementById('getCodes').style.display = 'block';
document.getElementById('reciprocal').style.display = 'none';
window.clearInterval(reciprocal);
}
}

这样同样是可行的，注意是写函数名就可以了

下面我主要讲讲一些细节我们把上面的代码改造成这样

function getCodes() {
this.name = "AutumnsWind";
this.num = 223;
}
getCodes.prototype.back = function() {
console.log(this);
document.getElementById('reciprocal').style.display = 'block';
document.getElementById('getCodes').style.display = 'none';
var time = 60;
var reciprocal = window.setInterval(function() {
console.log(this);
//console.log(time);
if (time > 0) {
document.getElementById('reciprocal').innerHTML = time;
time--;
} else {
document.getElementById('getCodes').style.display = 'block';
document.getElementById('reciprocal').style.display = 'none';
window.clearInterval(reciprocal);
}
}, 1000);
document.getElementById('reciprocal').innerHTML = '获取成功';
console.log('获取成功');
}
var gd = new getCodes();
gd.back();

注意下输出的第一个this和第二个this有什么不同，原因在于window.setInterval的对象是window所以在setInterval里面this是指向window的，而back是指向getCodes这个对象的

为了让window.setInterval里面的this指向getCodes我们可以更改成这样

用self把this带进setInterval，这样里面的self就是指向getCodes了

var self = this;

var self = this;
var reciprocal = window.setInterval(function() {
console.log(self);
//console.log(time);
if (time > 0) {
document.getElementById('reciprocal').innerHTML = time;
time--;
} else {
document.getElementById('getCodes').style.display = 'block';
document.getElementById('reciprocal').style.display = 'none';
window.clearInterval(reciprocal);
}
}, 1000);

我们再往下实验，把setInterval函数里面的匿名函数放出来定义

function reciprocal() {
console.log(this);
//console.log(time);
if (time > 0) {
document.getElementById('reciprocal').innerHTML = time;
time--;
} else {
document.getElementById('getCodes').style.display = 'block';
document.getElementById('reciprocal').style.display = 'none';
window.clearInterval(reciprocal);
}
}

然后实验下面每一个尝试去理解

var reciprocal = window.setInterval(reciprocal, 1000);

正常

var reciprocal = window.setInterval(this.reciprocal, 1000);

this指向window对象

var reciprocal = window.setInterval("reciprocal()", 1000);

reciprocal is not a function,其实也就是window.count()

var reciprocal = window.setInterval(self.back(), 1000);

当前实例的back

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： web前端前端技术 javascript 前端

相关文章推荐

新的分享

章节导航