前言

在项目中有一个需求，就是鼠标hover时展示二维码，一开始就直接写的展示（二维码是从接口返回来的），但是发现如果快速移入移出多个不同的目标，就会发生二维码展示错乱以及价格展示错误，最严重的一点就是会一直调接口消耗服务性能，并且产生好多垃圾数据。

解决方案就是，当鼠标移入某个目标区域悬停2秒后再触发接口获取二维码，接下来看代码

   <div
              class="mouseEnter_show_qr"
              @mouseenter="show_qr_area($event)"
              @mouseleave="hide_qr_area"
            >
         鼠标悬停展示二维码
 </div>
<script>
export default {
      data(){
         return {
             delay_loading_qr :'',
          }
 
         },
      methods:{
              // hover支付的button时展示二维码
    show_qr_area(event) {
      this.delay_loading_qr = setTimeout(() => { 
       // 这里是调用二维码接口 
        this.deal_pay_button('showQR', event)
      }, 2000)
    },
   //  鼠标离开后就要关掉该定时器，这样就不会在2秒后再次请求接口
//    如果离开时不关掉就变成了鼠标悬停两秒后触发接口了。
    hide_qr_area() {
      clearTimeout(this.delay_loading_qr)
    },
       
      }
   }
</script>