Javascript的setTimeout详细用例 #4

Wscats · 2016-04-21T10:22:03Z

先简单写一个用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

The text was updated successfully, but these errors were encountered:

wangyusha · 2018-01-15T07:11:07Z

#51

Wscats added the notes label Apr 22, 2016

Wscats changed the title ~~JS的setTimeout详细用例~~ Javascript的setTimeout详细用例 Apr 22, 2016

Wscats mentioned this issue Feb 12, 2017

webpack入门 Wscats/webpack#1

Open

Wscats closed this as completed Aug 22, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Javascript的setTimeout详细用例 #4

Javascript的setTimeout详细用例 #4

Wscats commented Apr 21, 2016 •

edited

Loading

wangyusha commented Jan 15, 2018

Javascript的setTimeout详细用例 #4

Javascript的setTimeout详细用例 #4

Comments

Wscats commented Apr 21, 2016 • edited Loading

wangyusha commented Jan 15, 2018

Wscats commented Apr 21, 2016 •

edited

Loading