1. 程式人生 > >js-定時器(setInterval, setTimeout)

js-定時器(setInterval, setTimeout)

js-定時器(setInterval, setTimeout)

setInterval()

  • 表示沒間隔一定時間執行一次函式
  • 清除方法:clearInterval(timer)
var cnt = 0;
var timer = setInterval(function(){
    cosole.log(cnt);
    if(++cnt ==10){
        clearInterval(timer);
    }
},1000)

setTimeout()

  • 表示過限定時間後再執行函式,且只執行一次。
  • 清除方法:clearTimeout(timer);
var timer1 = setTimeout(function(){
    console.log("hello");
},1000)
clearTimeout(timer1);
PS:
  • 定時器setInterval和setTimeout都會返回一個數值,用於標識定時器。
寫一個三分鐘的定時器
<body>
    minutes:<input type="text" name="mminute" value = '0'>
    seconds:<input type="text" name="second" value = '0'>
</body>
<script type="text/javascript">
    var minuteNode = document.getElementsByTagName('input')[0];
    var secondNode = document.getElementsByTagName('input')[1];

    var min = 0;
    var second = 0;

    var timer = setInterval(function(){
        if(second == 60){
            second = 0;
            ++min;
            if(min == 3){
                clearInterval(timer);
            }
        }else{
            ++second;
        }
        minuteNode.value = min;
        secondNode.value = second;
    },1000)
    
</script>