【JS】函数防抖和节流

函数防抖

在一定时间间隔内只触发最后一次函数

应用情况

1.点击按钮触发
2.搜索框输入时触发的请求

代码实现

export default function(func, wait, immediate) {//防抖函数 
  let timeout
  return function(...args) {
    clearTimeout(timeout)
    timeout = setTimeout(() => {
      timeout = null
      if (!immediate) func.apply(this, args)
    }, wait)
    if (immediate && !timeout) func.apply(this, [...args])
  }
}
/* vue中的使用方法
	import Debounce from '@/untils/debounce.js'
	default (){
		…
		methods:{
			getData:Debounce(function(params){// params是当前方法的参数，会传入防抖函数
				//这里放执行代码
			},1000)
		},
		…
	}
	
	PS://请不要用箭头函数等其他写法，会导致this的指向错误，格式请严格按照上面的写法使用
 */

函数节流

在一定时间中只触发一次函数

应用情况

1.滚动框事件
2.函数触发的时间边界处理

代码实现

export default function(func, delay) {     
    let timer = null;     
    let startTime = Date.now();     
    return function() {             
        let curTime = Date.now();             
        let remaining = delay - (curTime - startTime);             
        let context = this;             
        let args = arguments;             
        clearTimeout(timer);              
        if (remaining <= 0) {                    
            func.apply(context, args);                    
            startTime = Date.now();              
        } else {                    
            timer = setTimeout(func, remaining);              
        }      
    }
}

最后

以上就是积极蜗牛为你收集整理的【JS】函数防抖和节流【JS】函数防抖和节流的全部内容，希望文章能够帮你解决【JS】函数防抖和节流【JS】函数防抖和节流所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。