亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

防抖的定義和實現

標簽:
Html5

一,防抖

1. 什么是防抖 ?

防抖是一个函数,所以也叫防抖函数,它能为普通函数添加并管理执行周期。

张三正在打农药,所玩的游戏角色快要死翘,于是按下回程,回程需要执行8秒的回程动画,回程动画执行完毕之前抖可以通过移动取消准备工作,如果没有取消,执行回程动作,瞬间移动到泉水。

为了区分概念,我们把等待执行的时间叫做等待时间,最终想要执行的函数叫做执行函数

(1)回程的周期

为了完成回程,经历了三个步骤:
1.按下回程键 =》2.回程动画开始 =》3. 移动到泉水
----------对应的是---------
1.事件触发 =》2.等待时间 =》3.执行函数
等待=>执行 是一个周期

(2)回程的实现

[ 定时器:MDN setTimeout] developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
一般情况下,我们用定时器来实现一个周期:8秒后执行 移动到泉水的函数执行

function backToTheHarbor () {
       回程动画.run()
       cycle = setTimeout(()=>{
          移动到泉水.run()
       },8S)
}
键盘设备.监听("回程健",backToTheHarbor)

周期虽然实现了,但是没有实现互斥,触发的每一次都会把定时器放到了异步队列,触发了n次事件,就会立刻执行n次回程动画,并且在10秒左右的时候就执行n次函数,一个任务的周期没有结束就开始另一个任务了。

周期的管理:每个周期都是独立的,那就需要对周期进行管理,在执行前后都进行初始化,但是,要怎么知道异步队列中有同样的指令在执行呢? 一般情况下我们用闭包来实现。

function backToTheHarbor () {
    var cycle;
    return function(){
       clearTimeout(cycle)
       回程动画.run()
       cycle = setTimeout(()=>{
          回程动画.stop()
          移动到泉水.run()
          cycle = null
       },10000)
    }
}
键盘设备.监听("回程健",backToTheHarbor)
點擊查看更多內容
1人點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消