廢話不多說,直接懟代碼

<template><div><button @click="show = !show">Toggle render</button><transition name="custom-classes-transition" enter-active-class="animated tada" leave-active-class="animated bounceOutRight"><p v-if="show">hello</p></transition><child></child><!-- <div @mousemove="currentFn(1000)" class="num">{{num}}</div> --><div @mousemove="currentJl(1000)" class="num">{{num}}</div><div @click="toLink()">跳轉</div></div> </template><script>import child from './child.vue'; // 引入子組件export default {name: "father",data() {return {show: true,num: 1,flag: true,//初次點擊觸發一次timer: null,currentTime: 0 //中間時間}},created() {this.num = 0;},methods: {doCount(){console.log('進入了');this.num++;},currentFn(wiat){ //防抖var that = this;clearTimeout(that.timer);if(that.flag){if(!that.timer){ //第一次進入that.doCount();}that.timer = setTimeout(()=>{that.timer = null;},wiat); }else{ that.timer = setTimeout(()=>{that.doCount();},wiat)} },currentJl(wiat){ //節流var now = + new Date(); //格林威治時間到當前時間的毫秒數if(now - this.currentTime > wiat){this.doCount();this.currentTime = now;}},toLink(){this.$router.push({path: '/newFile'})}},components: {child}} </script><style scoped>.fade-enter-active,.fade-leave-active {animation: bounce-in .5s;}.fade-enter,.fade-leave-to {opacity: 0;}.num{width: 3rem;height: 2rem;background-color: #666666;color: #FFFFFF;text-align: center;line-height: 2rem;} </style>

防抖:當持續觸發事件時,一定時間內沒有再觸發事件,事件處理函數才會執行一次,如果設定時間到來之前,又一次觸發了時間,就重新開始延時.
節流:當持續觸發事件時,保證一定時間段內調用一次事件處理函數.

通俗示例解釋:
小明家水管漏水,每隔一秒鐘第一滴(節流:只要沒有修好,就會每隔一段時間執行)
小明家水管漏水,每打水管一次,三秒后才會再漏水,每打一次就重新計時(防抖:在一段時間間隔內執行,觸發是會重新開始計時)

總結

以上是生活随笔為你收集整理的防抖与节流(鼠标移入事件每隔一段时间执行)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。