setTimeout与setInterval初探

setTimeout与setInterval的一些缺点

1.及时性问题

会存在不及时响应的问题

var d = new Date,count = 0,f,timer;
timer =  setInterval(f = function(){
    if(new Date - d > 1000){
        clearInterval(timer);
        console.log(count);
    }
    count++;
},0);

控制台：

Paste_Image.png

Node：

Paste_Image.png

原作者博客：

Paste_Image.png

时间的差距还是比较大的，原博客中说setInterval 和 setTimeout 函数运转的最短周期是 5ms 左右，HTML确实也有这样的规范,最近不能上外网，暂时没有验证。不清楚为什么console会跑那么快。

2.被阻塞问题

单线程的环境会导致setTimeout被阻塞

var d = new Date;
setTimeout(function(){
    console.log('show me after 1 sec,but you know:' + (new Date - d));
},1000);

while(1)
    if(new Date - d > 2000)
        break;

这次的结果都很统一，都在2010左右。Chrome非常稳定，最高也不超过2003。但阻塞是肯定存在的。

其实被阻塞的问题还是需要多说一下。做过一个关于搜索延迟的东西，要求在输入框一段时间内没有输入动作的时候，自动搜索输入框内容。
我考虑到了用setTimeout来做（大多是考虑用闭包来做）
想法是：

每当有一个新的输入，便去清除上一个定时器。

试验代码如下：

window.onload = function(){

    var dom = document.getElementById("test");
    var body = document.getElementsByTagName('body');
    
    var TimeOutconut = 0;
    var Changeconut = 0;
    dom.addEventListener("keydown",function(){
        console.log(Changeconut++);
        var date = new Date();
        var dirty = setTimeout(function(){
            console.log(new Date() - date);
            clearTimeout(dirty);
            console.log(TimeOutconut++);
        },5000);
    });
};

结果：

Paste_Image.png

很清楚的看到setTimeout是不阻塞的，输入了三次，三次结果在5秒后几乎同时返回。

修改后代码如下：

 window.onload = function(){

    var dom = document.getElementById("test");
    var body = document.getElementsByTagName('body');
    var dirty;
    var TimeOutconut = 0;
    var Changeconut = 0;
    dom.addEventListener("keydown",function(){
        console.log(Changeconut++);
        var date = new Date();
        clearTimeout(dirty);
        dirty = setTimeout(function(){
            console.log(new Date() - date);
            console.log(TimeOutconut++);
        },5000);
    });
};

及时清除了定时器，结果只做一次。

3. try..catch捕捉不到他的错误

不巧的是，chrome和Node环境都捕捉到了错误···

try{
    setTimeout(function(){
        throw new Error("我不希望这个错误出现！")
    }, 1000);
} catch(e){
    console.log(e.message);
}