setTimeout和setInterval的各自使用場景

默認的
setTimeout 只執行一次, 清除用clearTimeout
setInterval 每間隔指定的時間, 就執行一次, 清除用clearInterval

可是, setTimeout也能夠用來執行 每隔必定時間間隔就執行一次, 方法是在 函數內部使用 "遞歸"的調用.

foo(); //調用一次foo函數
function foo(){
// 函數主體
// ... 該數據處理的, 執行數據處理;
// ... 該輸出的, 就輸出
// ... 該顯示的, 你顯示
// 主體執行完了

setTimeout(foo, 5000); 

}
// 這個方法, 是一種 固定的 套路 用法, 固定的寫法.

那麼 "遞歸setTimeout" 和 setInterval 的區別?

• 若是要求 在固定的 精確 間隔時間後, 執行動做, 用setInterval,
• 若是要避免setInterval 在短間隔時間 連續調用 產生的相互干擾, 特別是 每次函數的調用須要繁重的計算以及很長的處 理時間, 這時更容易產生干擾,此時最好用 setTimeout.
• setTimeout不會產生干擾: 由於每次執行foo的時候, 老是先把當前此次foo的 函數主體 工做完成後, 再間隔指定時間後, 纔會開始執行下一次foo的動做.實際上執行的只是一個 "函數入口" , 是線性的, 有前後次序的, 因此不會發生干擾. 而setInterval 則是 "並行的"....

jquery中也可使用js原生代碼, 只不過要注意和jquery對象相區分,搞清楚究竟是js對象仍是jquery對象. jquery中沒有 "日期時間" 函數,因此仍是用 js 原生的 日期-時間 函數:

// 獲取當前的日期和時間
 var datetime/dt= new Date();
 alert(dt)
// datetime 顯示的是: 星期 月日年 時間HH:ii:ss GMT+0800

程序代碼舉例

/*  在setInterval中使用匿名函數. */
<script src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function() {
    var i = 0;
    var timer = setInterval(function(){
        var dt = new Date();
        var month = dt.getMonth()+1;
        alert('如今是: '+ dt.getFullYear()+'年, '+ month +'月, '+dt.getDate()) + "日";
        i++;
        if (i>= 3){
            clearInterval(timer);     // 在setInterval函數內部, 就可使用clearInterval清除計時器.
        }
        
    },500);
});
</script>

/*  在setInterval中使用code,delay參數. */
<script type="text/javascript">
$(function() {
    var timer = setInterval(showDate,500);  // 這裏千萬注意, 參數code, 就直接寫函數名, 不要加括號,也不要引號
    
    var i = 0;       // 這個初始化要放在函數的外面,才能保證只執行3次.
    function showDate(){
        var dt = new Date();
        var month = dt.getMonth()+1;
        alert('如今是: '+ dt.getFullYear()+'年, '+ month +'月, '+dt.getDate() + "日");
        i++;
        if (i>= 3){
            clearInterval(timer);
        }
    }
});

// 使用setTimeout實現屢次計時器  
// /*===========================================
// * 特別注意的是, var i=0 循環次數控制變量的位置, 放在函數調用前／後, 
// * 循環的次數是不一樣的, 這裏若是var i=0 放在showDate()以後, 將會顯示4次, 而不是預想的3次
// *===========================================*/

<script type="text/javascript">
$(function() {
    // 先 只 調用一次 "包含" 函數
    var i = 0;
    showDate();
    
    // 定義showDate, 並在函數內部使用: setTimeout(showDate, delay_microsecond)
    
    function showDate() {
        
    /* 函數主體 跟原來的業務處理 相同 */
        i++;
        var dt = new Date();
        var month = dt.getMonth()+1;
        alert('如今是: '+ dt.getFullYear()+'年, '+ month +'月, '+dt.getDate()) + "日";
        if (i>= 3){
        return;
        }       
    setTimeout(showDate, 500);
    }

});

</script>

**計算機只作你告訴它該作的事情, 可是, 並不會作你想作的事情!**