函数防抖与函数节流

函数防抖与函数节流,第1张

函数防抖

定义:指触发事件后,函数在 n 秒后只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数的执行时间。

应用场景:
1. 搜索框搜索输入。只需用户最后一次输入完,再发送请求;
2. 用户名、手机号、邮箱输入验证;
export function debouce(fn, delay){
	let timer = null
	return function() {
		clearTimeout(timer)
		let arg = argument
		timer = setTimeout(()=>{
			//指定this,否则指向fn()环境
			fn.apply(this, arg)
		}, delay)
	}
}


函数节流

定义:限制一个函数在一段时间内只能执行一次,过了这段时间,在下一段时间又可以执行一次。

应用场景:
1.输入框模糊查询间隔,可每两秒联想一次;
2.表单验证;
3.按钮提交;
首节流
export function throttle(fn, delay = 1000){
	let prev = null
	return function(){
		let args = arguments
		let date = Date.now()
		if(date - prex >= delay){
			fn.apply(this, args)
			prev = now
		}
	}
}
触发事件时立即执行,以后每过delay秒之后才执行一次,并且最后一次触发事件若不满足要求不会被执行

尾节流
export function throttle(fn, delay){
	let timer = null
	return function(){
		let args = arguments
		if(!timer){
			timer = setTimeout(()=>{
				fn.apply(this, args)
				timer = null
			}, delay)
		}
	}
}
第一次触发时不会执行,在delay秒之后才执行,当最后一次停止触发后,还会再执行一次函数。

定时节流
export function throttle(fn, delay) {
  let timer = null;
  let prev = null;
  return function () {
    let now = Date.now();
    let remaining = delay - (now - prev);
    const args = arguments;
    clearTimeout(timer);
    if (remaining <= 0) {
      fn.apply(this, args);
      prev = Date.now();
    } else {
      timer = setTimeout(() => {
        fn.apply(this, args)
      }, delay);
    }
  }
}

第一次马上执行,最后一次也会执行

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/langs/722127.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-26
下一篇 2022-04-26

发表评论

登录后才能评论

评论列表(0条)

保存