Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Javascript的setTimeout详细用例 #4

Closed
Wscats opened this issue Apr 21, 2016 · 1 comment
Closed

Javascript的setTimeout详细用例 #4

Wscats opened this issue Apr 21, 2016 · 1 comment
Labels

Comments

@Wscats
Copy link
Owner

Wscats commented Apr 21, 2016

先简单写一个用setTimeoutclearInterval配合写的例子

<!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这个对象的
image
为了让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

@Wscats Wscats added the notes label Apr 22, 2016
@Wscats Wscats changed the title JS的setTimeout详细用例 Javascript的setTimeout详细用例 Apr 22, 2016
@wangyusha
Copy link

#51

@Wscats Wscats closed this as completed Aug 22, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants