节流

117 阅读1分钟

1. 定义

1,当持续触发事件时,在规定时间段内只能调用一次回调函数。如果在规定时间内又触发了该事件,则什么也不做,也不会重置定时器.

2. 使用场景

基础条件:

1,客户连续频繁地触发事件

2,客户不再只关心"最后一次"操作后的结果反馈.而是在操作过程中持续的反馈.稀释触发频率

例如:

一鼠标事件mousemove,窗口缩放事件onsize,滚动条事件onscroll等一些用户'一次'操作导致多次事件触发。

3. 实现方式

1,通过时间戳的形式:通过记录事件触发的第一次的时间戳,然后在规定的n秒后,才让它继续触发。

/*
*@param cb需要处理的函数/事件
*@param n函数/事件稀释的次数
*/
function throttle(cb,n){
	let prev = new Date().getTime()
  return function (args){
  	let that = this
    let content = args
    let next = new Date().getTime() 
    if(n < next - now){
    	cb.apply(that,content) //cb.call(that,[...args])
      prev = next
    }
  }
}

2,通过定时器的形式:

1)立即执行

function throttle(cb,n){
	let lock = false
  return function (args){
  	let that = this
    let content = args
    if(!lock){
    	cb.apply(that,args)
      lock=true
      setTimeout(()=>{
      	lock=false
      },n)
    }
  }
}