1. 程式人生 > >JavaScript中的setInterval()和setTimeout()

JavaScript中的setInterval()和setTimeout()

1.setlnterval()

setInterval() 方法可按照指定的週期(以毫秒計)來呼叫函式或計算表示式。

setInterval() 方法會不停地呼叫函式,直到 clearInterval() 被呼叫或視窗被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的引數。

setInterval(code,millisec[,"lang"])

例項:

<html>
<body>

<input type="text" id="clock" size="35" />
<script language=javascript>
var int=self.setInterval("clock()",50)
function clock()
  {
  var t=new Date()
  document.getElementById("clock").value=t
  }
</script>
</form>
<button onclick="int=window.clearInterval(int)">
Stop interval</button>

</body>
</html>

2.setTimeout()

setTimeout() 方法用於在指定的毫秒數後呼叫函式或計算表示式。

setTimeout(code,millisec)

例項:

<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 seconds!')",5000)
}
</script>
</head>

<body>
<form>
<input type="button" value="Display timed alertbox!"
onClick="timedMsg()">
</form>
<p>Click on the button above. An alert box will be
displayed after 5 seconds.</p>
</body>

</html>

例項:

<script>

    function load() {
        //第一個圖表

        var myChart1 = echarts.init(document.getElementById('change-echarts1'));

        var app = {
            xday:[],
            yvalue:[]
        };

        // 傳送ajax請求,從後臺獲取json資料
        $(document).ready(function () {
            getData();
            console.log(app.xday);
            console.log(app.yvalue);
        });

        function getData() {
         $.ajax({
            url:'echarts',
            data:{},
            type:'get',
            dataType:'json',
            success:function(result) {
                alert(result.yvalues);
                app.xday = result.xdays;
                app.yvalue = result.yvalues;
                myChart1.setOption({
                    title: {
                        text: 'PH資料變化情況'
                    },
                    tooltip: {},
                    legend: {
                        data:['PH']
                    },
                    xAxis: {
                        data: app.xday
                    },
                    yAxis: {},
                    series: [{
                        name: 'PH',
                        type: 'line',
                        data: app.yvalue
                    }]
                })
            },
            error:function (msg) {
                console.log(msg);
                alert('系統發生錯誤');
            }
        })
        };

        t = setTimeout("load()",5000);

    };
    
</script>

3.onload事件

onload 事件會在頁面或影象載入完成後立即發生。

<html>
<head>
<script type="text/javascript">
function load()
{
window.status="Page is loaded"
}
</script>
</head>

<body onload="load()">
</body>

</html>