平凡无比的重复劳动也经常会发生一些匪夷所思的现象，发生的原因可能只是因为一个小疏忽，可能只是使用场景的改变，但是再平凡的代码，也会产生让你耗费大量时间才解决的问题。本篇就记录下这些细节，少走些弯路。长期更新，有人补充就更好啦。（文中的$代表jQuery，原谅我还做着jQuery项目= =）
1、清除定时器 clearTimeout
经常会维护一个变量，来控制定时器。
let timer = setTimeout(()=>{
alert('我是定时器')},1000)
clearTimeout(timer);上面的代码是不会弹出任何东西的，因为定时器被你清除了。那么这样呢
let timer = setTimeout(()=>{
alert('我是定时器')
},1000)
timer = setTimeout(()=>{
alert('我还是定时器')
},1000);
clearTimeout(timer);弹出了‘我是定时器’。因为起了2个定时器，clearTimeout是针对定时器的ID来工作，而此时的ID已经指向第二个定时器，所以无法把第一个定时器清除。
有人会有疑问，谁会这么傻，起两个定时器，这不是活该吗？
实战中还是很有可能会发生的，毕竟往往调用别人的函数，很容易一不小心起了两个定时器。比如有人这么写了个函数
let timer = null；function showLoading(flag，time=10000){ //显示遮罩的函数
if(flag){
$('#load').show(); //显示遮罩
timer = setTimeout(()=>{ //显示一定时间后隐藏遮罩
$('#load').hide();
},timer)
}else{
$('#load').hide(); //隐藏遮罩并去除定时器
clearTimeout(timer);
}
}该函数的目的是显示遮罩，并且可以控制显示时间。
如果调用一次showLoading(true，30000)后在没有调用showLoading(false)的情况下再调用了一次，会发现第二次可能不到30S遮罩就消失了，原因就是起了两个定时器，而第一个定时器把你的遮罩取消了。
所以实际开发中起定时器前一般要先清除，这样别人就算调了两次你的函数，也不会有问题，写公共函数的同学尤其注意了
let timer = null；function showLoading(flag，time=10000){ //显示遮罩的函数
if(flag){
$('#load').show(); //显示遮罩
if(timer !== null){ //判断是否有定时器
clearTimeout(timer);
}
timer = setTimeout(()=>{ //显示10S后隐藏遮罩
$('#load').hide();
},timer)
}else{
$('#load').hide(); //隐藏遮罩并去除定时器
clearTimeout(timer);
timer = null; //清除后变为null，表示该定时器已经被清除
}
}靠timer是否等于null来判断是否有定时器在工作
2、call,apply
非常需要注意，call和apply后面需要先写一个对象，代表谁来调用这个函数，之后才是函数的参数，千万不能把上下文对象漏了，否则后果很严重。
function add(a,b){ return a+b;
}
add.call(null,2,3); //5add.call(2,3); //NaN像这种情况还行，错误很明显。如果是在处理延迟对象的时候漏掉了。
//defArr是用来存放延迟对象的数组$.when.apply(defArr).done(function(){}); //此时相当于$.when().done()done的函数就起不到回调函数作用，它会马上执行，不等待延迟对象的返回结果。有时这错误还很难发现，所以要特别注意。赶紧检查下你们代码中有没有漏掉第一个参数的地方。
3、removeEventListener
document.body.addEventListener('click',function(){
alert(1);
})document.body.removeEventListener('click',function(){
alert(1);
})此时点击body还是会弹出1。因为移除时传入的参数必须与添加处理程序时使用的参数完全相同。两个匿名函数，虽然作用一样，但是却不相等。所以要这样
var ev = function(){
alert(1);
}document.body.addEventListener('click',ev);document.body.removeEventListener('click',ev);习惯jquery的用户是不是惊呆了。赶紧记住！
4、活用Deferred.then
这个点针对jquery用户，当然也可以套用到ES6 的Promise上。
then不仅可以简写done和fail，同时还有个更强大的功能，就是返回一个新的Deferred对象。
比如，有这么一个库函数
function readFile(){ return $.Deferred((def)=>{
setTimeout(()=>{
def.resolve({ params:1
})
},1000);
})
}新手使用readFile的时候可能会这样写
function test(){ return $.Deferred((def)=>{
readFile().done(json=>{
def.resolve(json.params)
})
})
}
test().done(json=>{
alert(json);
})没毛病，的确处理了readFile的返回结果。但是额外在readFile外面包了一层，多了一层嵌套。如果使用then的话会简洁很多
function test(){ return readFile().then(json=>{ //注意这里是then不是done哦
return json.params;
})
}
test().done(json=>{
alert(json);
})then会返回一个新的Deferred对象，活用它代码会简洁很多。如果不是很清楚，可以去百度下jquery done和then的区别，这里不做详细解释。
ES6的Promise也适用，不用每次都去调用Promise构造函数生成新的Promise，而是选择使用then。
5、sort()排序
let arr = [3,2,1]; arr.sort(); //1,2,3
sort()函数按升序排列数组项。但是它会调用每个数组项的toString()方法，然后比较得到的字符串，所以如果出现两位数就达不到效果了。
let arr = [3,2,13]; arr.sort(); //13,2,3
13跑到最前面了。因为"13"<"2"。
所以正确的写法是在参数里写上判断函数。
有人可能会这么写
let arr = [3,2,1]; arr.sort((a,b)=> a>b); //1,2,3
数组里全是数字的情况可以胜用。但是如果数组里的元素是字符串就会失败。
let arr = ["3","2","13"]; arr.sort((a,b)=> a>b); //"13","2","3"
因为有很多情况，期望是数字的值，实际上是字符串。比如从input中获取值。所以以下代码是最靠谱的
let arr = ["3","2","13"]; arr.sort((a,b)=> a-b); //"2","3","13"
通过a-b来控制升序。"13"<"2"但是"13" - "2" > 0
6、setTimeout和箭头函数
大家都知道箭头函数是可以将this绑定为定义时的对象，但是我在Vue开发中却遇到了个匪夷所思的现象，this还是指向了window。不信邪的我赶紧写个测试代码压压惊
let a = 1;let obj = { a:2,
foo(){
setTimeout(()=>{ console.log(this.a);
},2000)
}
}
obj.foo(); //2舒了口气，看来没学错。
再仔细看看，发现定时器实际生效时，组件被销毁了，于是加了个keep-alive，缓存组件，this终于成功指向了该组件。
未完待续。。。有错误的还望指正。
作者：闪闪发光的狼
链接：https://www.jianshu.com/p/77a0e25f96bd
随时随地看视频
