无论何时，记得做好代码的清理工作

2014-02-17 1017

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 在看了一些关于HTML5 Audio API的资源后，一下子热情高涨顺势写了个音乐频谱效果的作品来玩味，也就是上上篇博文里介绍的。今天在测试的时候发现三个问题处理得不是很好：当歌曲正在播放的时候再选择另一首，页面顶部的标题没有很好地更新对于有些音频文件，比如在上篇博文中提供的示例音乐里面，bbc_sherlock_openning.mp3这个文件在播放完毕后频谱居然不会归零！另一个问题就是重点了，歌曲播放完了后后台代码仍在不停地跑结论鉴于后面的内容是跟具体程序有关的（上上篇博文中介绍的Audio Visualizer），所以不知道源码的你或许不太感兴趣，于是把结论提前。

在看了一些关于HTML5 Audio API的资源后，一下子热情高涨顺势写了个音乐频谱效果的作品来玩味，也就是上上篇博文里介绍的。今天在测试的时候发现三个问题处理得不是很好：

当歌曲正在播放的时候再选择另一首，页面顶部的标题没有很好地更新
对于有些音频文件，比如在上篇博文中提供的示例音乐里面，bbc_sherlock_openning.mp3这个文件在播放完毕后频谱居然不会归零！
另一个问题就是重点了，歌曲播放完了后后台代码仍在不停地跑

结论

鉴于后面的内容是跟具体程序有关的（上上篇博文中介绍的Audio Visualizer），所以不知道源码的你或许不太感兴趣，于是把结论提前。

我想说的就是，在JavaScript中递归使用了setTimeout或者setInterval，或者requestAnimationFrame(这个方法本身要求你递归使用)，如果你的代码有结束条件，最好在递归满足结束条件后调用clearTimeout/clearInterval，cancleAnimationFrame来结束这些方法的运行。

就比如在问题三当中，我用的requestAnimationFrame来写的动画，当歌曲播放完毕，调用cancleAnimationFrame来清理之前设置的requestAnimationFrame以释放内存。

下面是个关于取消requestAnimationFrame的简单例子，来自css-tricks：

var globalID;

function repeatOften() {
    $("<div />").appendTo("body");
    globalID = requestAnimationFrame(repeatOften);
}
$("#start").on("click", function() {
    globalID = requestAnimationFrame(repeatOften);
});
$("#stop").on("click", function() {
    cancelAnimationFrame(globalID);
});