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>

JavaScript中的setInterval()和setTimeout()

猜你喜欢