Javascript和vue复用方法

节流和防抖

防抖:按键完之后,清除上一次的定时器

let timer = null
div.onkeyup = function(){
if(timer !== null){
clearTimeout(timer)
}
timer = setTimeout(()=>{
//做些事情
},1000)
}

节流:在我执行期间不能让我重新执行,等我执行完了才可以,防止你的手速太快

let timer = null
div.onmouseenter = function(){
if(timer !== null){
return
}
timer = setTimeout(()=>{
//做些事情
timer = null
},100)
}
//防抖
function debounce(fn,wait){
    let timer = null;
    return function(args){
        clearInterval(timer)
        timer = setTimeout(function(){
            console.log(args);
            fn.apply(this,args)
        },wait)
    }
}

//节流
function throttle(fn,wait){
    let timer = null;
   return function(args){
    if(timer){
    }else{
        timer = setTimeout(()=>{
            fn(args)
            timer = null
        },wait)
    }
   }
}

随机数组打乱

 let arr = ['摸摸啊','拉拉','知乎这也'];
        let length = arr.length,index,temp
        for(let i = length - 1;i >= 0;i--){
            index = Math.floor(Math.random() * i);
            temp = arr[index];
            arr[index] = arr[point];
            arr[point] = temp
        }
        console.log(arr);

vue下拉加载更多

data() {
    return {
      homeList: [],
      homeFilterList: [],
      typeOne: "",
      loading: false,
    };
  },
  mounted() {
    this.homeReq();
    if (this.$store.state.homeClickIndex == 0) {
      this.homeReq();
    }
    window.onscroll = this.windowScroll;
  },
  destroyed() {
    window.onscroll = null;
  },

  methods: {
    windowScroll() {
      let html = document.documentElement;
      let scrollHeight = html.scrollHeight;
      let clientHeight = html.clientHeight;
      let scrollTop = html.scrollTop;
      if (clientHeight + scrollTop + 150 >= scrollHeight && !this.loading) {
        this.homeReq();
      }
    },
    async homeReq() {
      this.loading = true;
      let page = 1;
      const res = await homeApi({page:page++});
      setTimeout(() => {
        this.loading = false;
        this.homeList = [...this.homeList,...res];
      }, 200);
    },
  },

 页面滚动


//最外层div的ref
const formContent = ref();
//相对滚动的div的ref
const scrollContent = ref()
onMounted(() => {
  formContent.value.scrollTop = 0;
})
const emiteScroll = (index) => {
  currentActive.value = index;
  if (index === 0) {
    formContent.value.scrollTop = 0;
  } else {
    let top = 0;
    for (let i = 0; i < scrollContent.value.children.length; i++) {
      if (index === i) {
        continue;
      } else {
        top += scrollContent.value.children[i].getBoundingClientRect().height
      }
    }
    formContent.value.scrollTop = top + 16;
  }

}

几天超时

   let times = new Date(value)
          let time = new Date()
          let nowTime = Math.floor((time.getTime() - times.getTime()));
          let diffInDays = Math.floor(nowTime / (1000 * 60 * 60 * 24));
          if (diffInDays > 0) {
            value = `超时${Math.abs(diffInDays)}天`
          } else if (diffInDays < 0) {
            value = `${Math.abs(diffInDays)}天后超时`
          }
          else {
            value = `即日超时`
          }

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值