['10','10','10','10','10'].map(parseInt);
// [10, NaN, 2, 3, 4]
//隐式转换和parseint的参数问题
#### 节流
1. 函数节流:限制一个函数在一定的时间内只能执行一次
一定时间限制一个动作只执行一次
1. 需要节流的原因:一些事件比如mousemove scroll不做限制的话会触发的很频繁,如果里面有回调函数就会一直被触发,如果操作dom就很耗性能,还有重复调用ajax不仅造成数据混乱还有网络拥塞
2. 实现思路:主要是通过settimeout定时器设置延时时间
4. 代码:
//封装,第一次不会执行,有定时器 function throttle (method,delay) { //method是要执行的函数,delay是间隔时间 //1、设置定时器 let timer = null //2、返回一个节流函数 return function () { //取出this和参数,因为settimeout this是全局 let that = this, params = arguments //判断上一个定时器是否执行完毕 if(!timer) { //定义定时器 timer = setTimeout(function () { //执行函数 method.apply(that,params) },delay) } } } 第一次会执行,第一次间隔肯定大于delay function throttle (method,delay) { let time = 0 return function () { let cur = +New Date() if(cur - time > delay) { //执行函数 method.apply(that,params) time = cur } } }
5. 时分函数,分批创建
```javascript
var timeChunk = function (ary, fn, count) {
var t;
var start = function () {
for (var i = 0; i < Math.min(count || 1, ary.length); i ++) {
var obj = ary.shift();
fn(obj);
}
}
return function () {
t = setInterval (function () {
if (ary.length === 0) { //如果全部节点都已经被创建好
return clearInterval(t);
}
start();
}, 200); //分批执行的时间间隔,也可以用参数的形式传入
};
};
6. 使用场景:懒加载、滚动条、搜索、防止高频点击提交
http://c.biancheng.net/view/5761.html
https://segmentfault.com/a/1190000019577510
#### 防抖
1. 同上
2. 原理:触发事件之后n秒内也只会执行一次,如果在n秒内再次出发就重新计算执行时间,比如:连续触发只执行最后一次 例子坐公交车
3. 目的:任务频发触发的情况下,只有任务触发的间隔超过一段时间间隔才会触发,如果一直触发就一直不会完成任务
4. 代码
```javascript
function debounce (method,interval) {
//interval是间隔时间
let time = null
return function () {
clearTimeout(time)
let that = this, params = argumnets
time = setTimeout ( () => {
method.apply(that,params)
},interval)
}
}
5. 应用:搜索框搜索输入。只需用户最后一次输入完,再发送请求,手机号、邮箱验证输入检测,窗口大小Resize。只需窗口调整完成后,计算窗口大小。防止重复渲染。
6. 比较:节流侧重一段时间执行一次,防抖侧重的是在一定间隔时间一直触发只执行最后一次
7. 都可以通过使用 `setTimeout` 实现。目的都是降低回调执行频率。节省计算资源。
8. 实验代码
function handle() {
console.log(Math.random())
}
let n = 0
function f() {
console.log('次数'+ ++n)
}
//window.addEventListener('mousemove',handle)
//window.addEventListener('mousemove',throttle(handle,3000))
window.addEventListener('mousemove',debounce(handle,3000))
/* window.onresize = throttle(f, 1000); */
/* window.onresize = f */
window.onresize = debounce(f, 1000);