Closed
Description
先简单写一个用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 = "Wscats";
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
Activity
[-]JS的setTimeout详细用例[/-][+]Javascript的setTimeout详细用例[/+]wangyusha commentedon Jan 15, 2018
#51