回上頁 - 網頁JavaScript語法

011、setTimeout()時間函式

1、setTimeout()時間函式：在等待指定的時間後執行一次函數

範例1：基本寫法

<script>
$(document).ready(function(){

    setTimeout("alert('哈囉！')",2000);
});

</script>

範例2：呼叫外部函式寫法

<script>
$(document).ready(function(){

    setTimeout(hello, 2000);    //函式名稱不可以寫出小括號，寫出來會變成直接呼叫
});

//自己寫一個函式，名稱是hello()
function hello(){

    alert("哈囉！大家好！");
}

</script>

範例3：直接寫出匿名函式，程式碼寫在裡面，建議都這樣寫

<script>
$(document).ready(function(){

    setTimeout(function(){

        alert("哈囉！你好啊！");
    },2000);
});

</script>

2、可以使用 clearTimeout() 方法停止执行

範例1：

<script>
$(document).ready(function(){

   var myTimer = setTimeout(hello, 3000);    //啟動
   clearTimeout(myTimer);                    //清除，所以什麼都沒發生
});

function hello(){
    alert("哈囉！大家好！");
}
</script>

 

範例2：

<button onclick="clearTimeout(myTimer);">停止三秒啟動</button>

<script>
//變數要宣告在函式外面，<button>才讀取的到
var myTimer;

$(document).ready(function(){

   myTimer = setTimeout(hello, 3000);
});

function hello(){
    alert("哈囉！大家好！");
}
</script>

3、練習


<button onclick="var myTimer = setTimeout(hello, 2000)">啟動一次</button>
<button onclick="clearTimeout(myTimer)">取消了</button>

<script>

function hello() {
  alert("哈囉！你好啊！");
}

</script>

 


<button id="start">啟動一次</button>
<button id="stop">取消了</button>

<script>

$(function(){

    var myTimer;

    $("#start").on("click",function(){
        myTimer = setTimeout(myFunction, 2000)
    })

    $("#stop").on("click",function(){
        clearTimeout(myTimer)
    })

});
function myFunction() {
  alert("哈囉！你好啊！");
}

</script>

4、在按鈕上加入音效


<button id="start">啟動一次</button>
<button id="stop">取消了</button>

<!-- 音效要加下面一行在網頁中 -->
<audio id="audio" src=""></audio>

<script>

$(function(){

    var myTimer;

    $("#start").on("click",function(){

        myTimer = setTimeout(myFunction, 2000)

        //加入音效，可以使用 MP3或 WAV音效檔案，下載到你的目錄裡
        //音效檔案放在 audio 目錄裡
        //寫入下面二行即可播放
        audio.src = "audio/dingdong.wav";
        audio.play();
    })

    $("#stop").on("click",function(){
        clearTimeout(myTimer)
    })

});
function myFunction() {
  alert("哈囉！你好啊！");
}

</script>



<script>

$(function(){

    //同一個元件上的事件，也可以如下分開寫

    $("#start").on("click",function(){

        myTimer = setTimeout(myFunction, 2000)
    })

    $("#start").on("click",function(){
        
        audio.src = "audio/dingdong.wav";
        audio.play();
    })

});

</script>

練習題

範例：

<script>
$(document).ready(function(){

    
});
</script>
shape
shape