更新时间:2017年11月09日12:26:37
1、函数节流
场景:监听页面滚动到距离底部小于等于10px,触发请求分页数据;但监听滚动事件,每滚动一帧会触发一次函数,当用户快速滚动页面到达底部,会连续触发10次请求,因此需要设定,在具体的时间(比如1000ms)内,只能触发一次函数;
函数节流技术:解决频繁触发函数性能问题
请求数据的函数:getDate(){}
执行函数的方案:
clearTimeout(this.getDateTimer);
this.getDateTimer = setTimeout(()=>{
this.getDate();
},1000)
函数节流技术引发的问题,每次请求都需要在延迟1000ma后才能执行,能否先请求,后延时,延时未过,不进行下一次请求?
优化方案:
定义变量并初始化:let delayTieout = true;
执行函数的方案:
if(delayTimeout){
this.getData();
}
delayTimeout = false;
clearTimeout(this.getDateTimer);
this.getDateTimer = setTimeout(()=>{
delayTimeout = true;
},1000)
这个方案,保证第一次会实时执行请求数据的函数,但第二次执行只能在1000ms后才能触发;
2、数据运算
数据转换:+‘1’将String类型数据转换成Number;‘’+1将Number类型的数据转换成String类型
0.1+0.2=0.30000000000000004、2.4/0.8=2.9999999999999996的问题,这是JavaScript浮点运算的自身的问题。 处理方案:先将结果相加,然后用toFixed(2)精确两位小数转换成字符串,再转成Number类型,如下:
+((0.1+0.2).toFixed(1));
3、自执行函数
!(function(n){
console.log(n);//window对象
}(window));
4、用HTML属性data-*获取HTML中DOM元素的索引
问题:如下,轮播图结构,如何获取当前轮播图片li标签的索引,可以用到HTML新属性data-*
<ul>
<li></li>
<li></li>
<li></li>
...
</ul>
改变DOM结构如下:
<ul>
<li data-index='0'></li>
<li data-index='1'></li>
<li data-index='2'></li>
...
</ul>
获取当前轮播图索引的方法:
let index = $('ul>li').attr('data-index');
5、switch 语句的高级用法
未完,待续...