函数节流与防抖

官网上写了一个简单tab栏的轮播，但是触发切换的条件是鼠标悬停，这时会遇到两个问题：

1. 一个是鼠标不停的晃动会不停的触发切换

2. 如果设置了简单的动画开关则在动画结束前即使长时间停留在tab上也不会再触发动画

解决方法：

1. 函数节流

2. 动画队列

动画队列的实现相当简单，只是记得当时学jquery时不理解$.queue,结果需要的是否反倒直接自己写了一个，可能这就是念念不忘，必有回响吧...

所以这篇主要记录函数节流和顺带想起来的函数防抖

#### 函数节流（throttle）

**指某些代码不可以在没有间断的情况下连续重复执行**

```js

function throttle ( method, wait= 1000, context){

clearTimeout( method. tid)

method. tid = setTimeout( function(){

method. call( context)

}, wait)

}

```

#### 函数防抖 （debounce）

**指一个事件如果频繁触发，会隔一段时间执行一次**

```js

function debounce( fn, delay, mustRunDelay){

var timer = null;

var t_start;

return function(){

var context = this;

var args = arguments;

var t_curr = + new Date();

clearTimeout( timer);

if(! t_start){

t_start = t_curr;

}

if( t_curr - t_start >= mustRunDelay) {

fn. apply( context, args);

t_start = t_curr

} else {

timer = setTimeout( function(){

fn. apply( context, args);

}, delay);

}

}

}

```

参考

> javascript高级程序设计

> lodash https://www.lodashjs.com/docs/4.17.5.html#debounce