尽管现在已有很多相关工具库，对于其的理解学习也不能中断

防抖与节流

防抖：将多次触发变为一次触发

节流：减少一段时间的触发频率

防抖：通过setTiemout 限制执行次数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
//防抖函数包裹目标函数
debounce(
	submit(){
		
	}
)

function debance(fn){
    let t = null
	return function(){
        if(t){
			clearTimeout(t)
        }
        //限制fn的执行
		t = setTImeout(()=>{
		fn()
        },1000)
    }
}

//只要t定时器存在，就清除掉定时器
//多次点击只会执行一次

//存在两个问题
1.arguments传参数
2.this指向
	//包裹之前
当用户点击submit时候会传递参数，event,把实参传递到
	//包裹之后 
当前event为。。。

解决方案：
1.不可取写法：
function debounce(fn){
	let a = null;
    return function(e){
		if(t){
		clearTimeout(t)
        }
        console.log(this)
        //此处的this指向button
        t = setTimeout(function()=>{
         //fn(e) 不可取
        fn.apply(null,argument)
        //正解
                       },1000)
    }
}
	//但是不知道此处参数个数
正解：
	//通过arguments对象
argunments只在函数内部
通过箭头函数解决次问题，箭头函数没有arguments，因而他拿到的是外层函数的arguments


//那是否会延时执行定时器

*** 怎么让第一次点击不走延迟

  • 判断t 是否为null ,如果为null直接执行，但不是最佳方案 

    1
    2
    3
    4
    5
    6
    7
    - let firstCLick = !t;

    if(firstClick){



    }

节流