JS高级技巧汇总

更新时间：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');

未完，待续...