节流函数

1  //使用场景
2 created(){
3           this.$watch('query',debounce((newQuery)=>{//当搜索值发生变化的时候,将搜索值传递出去
4             this.$emit('query',newQuery )//如果在200ms内再次触发函数,不会调用里面的query事件;
5           },200))
6       }
 1 export function debounce(func, delay) {
 2   let timer
 3   return function (...args) {//我们调用一个函数,他会返回一个参数;我们拿到这个参数;
 4     if (timer) {
 5       clearTimeout(timer)
 6     }
 7     timer = setTimeout(() => {//定义延时函数;
 8       console.log('33333333333333333333333333333333333333节流函数册数')
 9       console.log(this)
10       func.apply(this, args)//箭头函数中的this指向符集作用域;对象中有属性,方法,但并没有this
11     }, delay)
12   }
13 }
14 
15 // 节流函数的原理
16 // 我们对某个函数进行节流,他会返回一个新的函数,新的函数会延迟执行我们要节流的这个函数;我们返回的函数反复被调用,不会总是触发我们的func函数;

 

posted @ 2018-08-24 09:04  前端极客  阅读(1554)  评论(0编辑  收藏  举报