记录js定时器产生 Deferred long-running timer task(s) to improve scrolling smoothness

前言

• 某日，在前台js中有一个倒计时发短信的需求，一次发送后，间隔60s才能继续发送，在页面调试的时候发现出现 Deferred long-running timer task(s) to improve scrolling smoothness. See crbug.com/574343. 这个警告，搜集资料后这里简单记录一下

不规范重现

• 以下代码导致

timer();

var i = 60;
function timer(){
    i--;
    ...
    $("#text").html(i+"s 后重新发送");
    setTimeout("timer();",1000);
}

分析

• 诈一看 肯能觉得没什么问题，timeout只执行一次，这里在函数体中再次调用timer函数 形成递归的形式，当时任然存在致命问题
  
  • 首先是 每次timer函数的执行都会 新开一个定时器，无论是对资源的消耗还是。。都是很大
  • 其次 递归新开的定时器并没有关闭， 这就造成了浏览器的警告，而浏览器的处理方式是延长定时器的执行任务时间，也就是说原本1秒执行一次的任务可能会被延后执行，因为在此期间要保证用户的点击、滑动等操作能够顺利执行

解决办法

• 可以采用setInterval 来实现，也可以采用timeout +函数递归，都只开一个定时器

var task;
function timer(){
    i--;
    ...
    if(i==0 && task!=null){/*有清除定时器的操作*/
        clearTimeout(task);
    }
    $("#text").html(i+"s 后重新发送");
}

 task = setTimeout("timer();",1000);

参考

stackoverflow的案例