当前位置：首页 > 其他问题 > vue 防抖动和节流动态路由传参

vue 防抖动和节流动态路由传参

王丛4年前 (2021-05-26)其他问题739

在第一次触发事件时，不立即执行函数，而是给出一个期限值
这个函数是用来防抖动  fn是你需要传入的方法
function debounce(fn,delay){
    let timer = null //借助闭包
    return function() {
        if(timer){
            clearTimeout(timer) 
        }
        timer = setTimeout(fn,delay) // 简化写法
    }
}
类似控制阀门一样定期开放的函数，也就是让函数执行一次后，在某个时间段内暂时失效，过了这段时间后再重新激活
function throttle(fn,delay){
    let valid = true
    return function() {
       if(!valid){
           //休息时间 暂不接客
           return false 
       }
       // 工作时间，执行函数并且在间隔期内把状态位设为无效
        valid = false
        setTimeout(() => {
            fn()
            valid = true;
        }, delay)
    }
}

动态路由

{
path:'/detail/:id'
component:() => import('views/detail/Detail')
}
this.$router.push('/detail/'+ 传递的参数)

this.$route.params.id 拿到数据

<keep-alive>//用来保存页面状态 
        <router-view ></router-view>
 </keep-alive>
 
  <div ref="ss">内容</div>
  this.$ref.ss.offsetTop
  offsetTop 可以获得 HTML 元素距离上方或外层元素的位置
  
  
  mapGettings  可以将store 里面的getting属性转换成 计算属性
  通过 import {  mapGettings } from 'vuex'
  compterd(){
   ...mapGettings ({
  自定义名称：'方法名'
   })
  }
  
  
  npm   install fastclick   解决移动端浏览器300m延迟问题

打赏