JavaScript基础系列 —— 定时器

函数

setTimeout、setInterval

接受的参数

  1. function (也可用字符串但是不建议)

  2. delay

返回值:定时器序列号——number类型

1
var a = setTimeout(function () {}, 0);
var b = setTimeout(function () {}, 30);
var c = setInterval(function () {console.log('interval func loading');}, 1000);

console.log('a is ' + a);
console.log('b is ' + b);
console.log('c is ' + c);

console.log(typeof a, typeof b, typeof c);

// 此时,如果使用number直接关闭定时器,会怎么样呢。例如:
clearInterval(16);  // 16只是类比的一个number

工作机制

  1. 为什么setTimeout 明明只执行一次,为什么又要有clearTimeout的存在?
1
var timer = null;
var func = function () {
    console.log('timeout func loading');
    timer = setTimeout(func, 1000);
};
func();

运行方式

1
setTimeout(function () {
    alert('timeout');
}, 0);
alert(now);

setTimeout 与 setInterval 的区别

1
var sleep = function (ms) {
    // do something
};

// timeout
var timer = null;
var func = function () {
    console.log('timeout func loading');
    timer = setTimeout(func, 20);
};
setTimeout(func, 20);
sleep(100);

// interval
setInterval(function () {
    console.log('interval func loading');
}, 20);
sleep(100);

可能的用法

1
// 将一个函数的调用,设置为没500ms只触发一次
var renderMinatoInfo = (function() {
    var timer = null,
        helper = function(tips) {
            var data = [];
            tips = tips && tips.length ? tips : [];

            _.each(Status, function(items, eventId) {
                if (Utils.specialFilter(eventId)) {
                    _.each(items, function(item, cartId) {
                        // 需要过滤非选中的商品
                        if (Utils.specialFilter(cartId) && item.checked !== false) {
                            data.push([Number(cartId), Models.effectiveCarts[eventId][cartId].sku_id, item.num]);
                        }
                    });
                }
            });

            // 发送请求
            Api.getMinatoInfo({
                postdata: JSON.stringify(data),
                total_fee: Status.subtotalPrice

            }, function(resp) {
                if (resp.tips && resp.tips.length) {
                    tips = tips.concat(resp.tips);
                }
                Views.renderActivityTips(tips);
                
            }, function () {
                Views.renderActivityTips(tips);
            });
        };

    return function(tips) {
        clearTimeout(timer);
        timer = setTimeout(function() {
            helper(tips);
        }, 500);
        return this;
    };
})()