JS高级技巧汇总

矫情吗；* 2022-06-06 12:47 221阅读 0赞

*更新时间：2017年11月09日12:26:37*

[《我的博客地图》][Link 1]

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 语句的高级用法

[JavaScript switch语句的技巧][JavaScript switch]

未完，待续...

[Link 1]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[JavaScript switch]: https://www.jianshu.com/p/3efebd2c785d

发表评论取消回复

表情：

评论列表（有 0 条评论，221人围观）

还没有评论，来说两句吧...

相关阅读

相关 markdown高级写作技巧汇总

文章目录 1 代码diff 2 待办事项 3 图片设置宽高 4 折叠 5 锚点链接

男娘i/ 2024年03月22日 23:58/ 0 赞/ 77 阅读

相关十几个CSS高级常见技巧汇总

![b44734242fc5416cd6db957dc0ae690c.png][] > 设置input的placeholder的字体样式 > 单行和多行文本超出省

￡神魔★判官ぃ/ 2022年11月07日 11:50/ 0 赞/ 257 阅读

相关【CSS】987- 十几个 CSS 高级技巧汇总

![7977daa26454b2a6e03b9448948329f7.png][] 作者：前端一零仙人 https://blog.csdn.net/weixin\_415

悠悠/ 2022年10月06日 12:58/ 0 赞/ 214 阅读

相关 20个 CSS 高级小技巧汇总

![7aa41002065f510ec87f10c365a02588.png][] 来源 | https://segmentfault.com/a/1190000003936

矫情吗；*/ 2022年09月09日 14:43/ 0 赞/ 247 阅读

相关 20 个 CSS 高级技巧汇总

使用技巧会让人变的越来越懒，没错，我就是想让你变懒。下面是我收集的CSS高级技巧，希望你懒出境界。 1、黑白图像这段代码会让你的彩色照片显示为黑白照片，是不是很酷？

朱雀/ 2022年09月09日 06:16/ 0 赞/ 252 阅读

相关 JS高级技巧汇总

更新时间：2017年11月09日12:26:37 [《我的博客地图》][Link 1] 1、函数节流场景：监听页面滚动到距离底部小于等于10px，触发请求分页数

矫情吗；*/ 2022年06月06日 12:47/ 0 赞/ 221 阅读

相关 JS高级技巧

https://fed.renren.com/2017/09/03/js-profesional-skill/?utm\_source=tuicool&utm\_medium=

拼搏现实的明天。/ 2022年06月05日 07:09/ 0 赞/ 237 阅读

相关 JS高级技巧(简洁版)

高级函数由于在`JS`中，所有的函数都是对象，所以使用函数指针十分简单，也是这些东西使`JS`函数有趣且强大安全的类型检测 `JS`内置的类型检测机制并不是完

小灰灰/ 2022年05月25日 13:14/ 0 赞/ 190 阅读

相关 js高级技巧

js高级技巧安全的类型检测 let data = [1,2,3,4] console.log(data instanceof Array) 但是

骑猪看日落/ 2022年05月18日 05:22/ 0 赞/ 202 阅读

相关 20 个 CSS 高级技巧汇总

使用技巧会让人变的越来越懒，没错，我就是想让你变懒。下面是我收集的CSS高级技巧，希望你懒出新境界。 1. 黑白图像这段代码会让你的彩色照片显示为黑白照片，是不是很酷

小咪咪/ 2021年06月26日 16:06/ 0 赞/ 437 阅读