前端面试题：事件防抖，函数节流，事件防抖和函数节流的区别

一、事件防抖：

      1、本来事件的触发比较频繁,但是,我们只希望这无数次的事件触发中,有部分事件是有效的（如：用户有短暂的停止时才调用函数）。特别是在触发一次，就发一次请求，会有无数次的抖动。

如:  键盘事件：onkeydown,onkeyup,onkeypress,oninput，都是按一次键,触发一次.触发非常频繁。

     2、使用场景:

搜索框(百度搜索框，淘宝，京东等等),每次用户输入内容都需要发一次请求,从后端拿到关键字对应的内容.

特别是输入汉字时:

我们希望用户输入完成汉字时再触发(发送请求)，

但是,实际情况是:当用户输入一个字母时,就会触发一次事件(发送一次请求)

记住：用户的输入习惯：当输入完一个汉字后，或者若干个汉字后，会有短暂的停顿。而在连续输入字母的过程中，不会有停顿。事件防抖的思路就是利用这个短暂停。

3、示例代码：

	
		
		
		
	
	
		
		
		

			
运动鞋
			
拖鞋
			
		
	

 

二、函数节流：

1、节流的意思是,不要调用太频繁;如每隔200ms调用一次.

 

2、使用场景:

如:在页面无数次的滚动时(就会触发无数次的onscroll),但是我希望触发（调用函数）不要那么频繁.

 

三、事件防抖和函数节流的区别：

 

1、函数节流:

节流的意思是：不要调用太频繁;如每隔200ms调用一次.

使用场景：

如:在页面无数次的滚动时(就会触发无数次的onscroll),但是我希望触发（调用函数）不要那么频繁.

 

2、事件防抖

防抖：在用户连续触发事件过程中，不能执行代码。

 

事件防抖的关键在：用户有停顿时,才执行代码（调用函数)，没有停顿时，不执行代码；

函数节流的关键在于：用户停顿不停顿都会触发，无非触发的频率(调用函数)没有原始事件那么多而已.。