zoukankan      html  css  js  c++  java
  • 节流函数

    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函数;
  • 相关阅读:
    《代码整洁之道》读书笔记六
    第九周总结
    《构建之法》读后感(五)
    学习进度条-第十二周
    3. 统计数字
    《构建之法》读后感(四)
    学习进度条-第十一周
    4. 丑数 II
    《构建之法》读后感(三)
    学习进度条-第十周
  • 原文地址:https://www.cnblogs.com/yangguoe/p/9527824.html
Copyright © 2011-2022 走看看