防抖与节流(鼠标移入事件每隔一段时间执行)

废话不多说,直接怼代码

<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>

防抖:当持续触发事件时,一定时间内没有再触发事件,事件处理函数才会执行一次,如果设定时间到来之前,又一次触发了时间,就重新开始延时.
节流:当持续触发事件时,保证一定时间段内调用一次事件处理函数.

通俗示例解释:
小明家水管漏水,每隔一秒钟第一滴(节流:只要没有修好,就会每隔一段时间执行)
小明家水管漏水,每打水管一次,三秒后才会再漏水,每打一次就重新计时(防抖:在一段时间间隔内执行,触发是会重新开始计时)

防抖与节流(鼠标移入事件每隔一段时间执行)相关推荐

总结以下三种方法，实现c#每隔一段时间执行代码：
总结以下三种方法,实现c#每隔一段时间执行代码: 方法一:调用线程执行方法,在方法中实现死循环,每个循环Sleep设定时间: 方法二:使用System.Timers.Timer类: 方法三:使用Sys ...
java每隔一段时间执行_8.Android中，每隔一段时间执行某一个任务（Timer）
1,在开发中我们有时会有这样的需求,即在固定的每隔一段时间执行某一个任务.比如UI上的控件需要随着时间改变,我们可以使用Java为我们提供的计时器的工具类,即Timer和 TimerTask. Tim ...
JS每隔一段时间执行一个方法
function funcTest(){ //每隔3秒执行一次timelyFun方法 window.setInterval("timelyFun()",3000); } windo ...
js每隔一段时间执行方法
方法一:每隔10秒执行一次 1 2 3 4 5 6 7 8 //申明一个全局变量存放间隔函数 var setIntervalFun = null; //每隔10秒钟执行一次setXSJYLTime() ...
每隔一段时间执行php_用php脚本，你如何定时更新商品列表
电商项目中为了提高抗并发能力,需要对商品列表做缓存,以下是更新缓存用的脚本: //PRODUCTION_为缓存商品列表的临时key //PRODUCTION为缓存商品列表key $con = mysq ...
NodeJS脚本中for循环中加入setTimeout实现每隔一段时间执行操作
在nodejs中打算实现每隔5s就console一下信息,总共打印10次,于是想到了for循环加setTimeout来实现,可是写出来发现10次在五秒后全部打印出来了,于是开始想办法解决,直接上解决办 ...
oracle怎么设置sql每隔一段时间执行一次_Oracle大规模数据快速导出文本文件
哈喽,前几久,和大家分享过如何把文本数据快速导入数据库(点击即可打开),今天再和大家分享一个小技能,将Oracle数据库中的数据按照指定分割符.指定字段导出至文本文件. 首先来张图,看看导出的数据是什 ...
每隔一段时间执行shell命令
需求:每10秒钟打印一句话:"i am a superman". while true do echo "i am a superman" sleep 10 d ...
python每隔半个小时执行一次_python – 在进程中每隔一段时间执行一次任务
如果您希望每2小时运行一次代码,最简单的方法就是使用cron或类似的调度程序,具体取决于您的操作系统如果你希望你的程序每n秒调用一次函数(在你的情况下为7200) 你可以使用一个线程和event. ...

防抖与节流(鼠标移入事件每隔一段时间执行)

防抖与节流(鼠标移入事件每隔一段时间执行)相关推荐

最新文章

热门文章