typescript写防抖节流 - Powered by Discuz! Archiver

首页 › TypeScript论坛 › typescript写防抖节流

用户粟恩樂逸 發表於 2020-10-28 18:11:00

typescript写防抖节流

<p><span style="color: rgba(255, 0, 0, 1)">注意：在javascript 中，我们一般直接使用函数利用闭包封装，这里会涉及this ，在typescript 中如果还是用函数写，this就会受到限制，无法通过编译的，所以可以使用class解决</span></p>
<h3><span style="color: rgba(22, 159, 230, 1)">防抖：在规定时间内重复操作一个事件只会执行一次，在时间段内会重新计算执行开始时间,常用与滚动事件，操作请求后台接口(防止频繁操作)</span></h3>
<h3><span style="color: rgba(22, 159, 230, 1)">节流：连续触发事件，n秒内只执行一次，节流会降低执行函数频率，可以用在并发的操作</span></h3>
<p> </p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 128, 1)"> 1</span> <span style="color: rgba(0, 0, 0, 1)">export class Debounced {
</span><span style="color: rgba(0, 128, 128, 1)"> 2</span>
<span style="color: rgba(0, 128, 128, 1)"> 3</span> <span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">*
</span><span style="color: rgba(0, 128, 128, 1)"> 4</span> <span style="color: rgba(0, 128, 0, 1)"> *
</span><span style="color: rgba(0, 128, 128, 1)"> 5</span> <span style="color: rgba(0, 128, 0, 1)"> * @param fn 要执行的函数
</span><span style="color: rgba(0, 128, 128, 1)"> 6</span> <span style="color: rgba(0, 128, 0, 1)"> * @param awit时间
</span><span style="color: rgba(0, 128, 128, 1)"> 7</span> <span style="color: rgba(0, 128, 0, 1)"> * @param immediate 是否在触发事件后在时间段n开始，立即执行，否则是时间段n结束，才执行
</span><span style="color: rgba(0, 128, 128, 1)"> 8</span>    <span style="color: rgba(0, 128, 0, 1)">*/</span>
<span style="color: rgba(0, 128, 128, 1)"> 9</span> static use(fn:Function,awit:number=1000,immediate:<span style="color: rgba(0, 0, 255, 1)">boolean</span>=<span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">){
</span><span style="color: rgba(0, 128, 128, 1)">10</span>       let timer:NodeJS.Timeout|<span style="color: rgba(0, 0, 255, 1)">null</span>
<span style="color: rgba(0, 128, 128, 1)">11</span>       <span style="color: rgba(0, 0, 255, 1)">return</span> (...args:any)=><span style="color: rgba(0, 0, 0, 1)">{
</span><span style="color: rgba(0, 128, 128, 1)">12</span>          <span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)">(timer) clearInterval(timer)
</span><span style="color: rgba(0, 128, 128, 1)">13</span>          <span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)">(immediate){
</span><span style="color: rgba(0, 128, 128, 1)">14</span>             <span style="color: rgba(0, 0, 255, 1)">if</span>(!timer) fn.apply(<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">,args);
</span><span style="color: rgba(0, 128, 128, 1)">15</span>             timer = setTimeout(<span style="color: rgba(0, 0, 255, 1)">function</span>(){<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">n 秒内多次触发事件,重新计算.timeer </span>
<span style="color: rgba(0, 128, 128, 1)">16</span>                   timer = <span style="color: rgba(0, 0, 255, 1)">null</span>;<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">n 秒内没有触发事件 timeer 设置为null，保证了n 秒后能重新触发事件 flag = true = !timmer</span>
<span style="color: rgba(0, 128, 128, 1)">17</span> <span style="color: rgba(0, 0, 0, 1)">             },awit)
</span><span style="color: rgba(0, 128, 128, 1)">18</span>          }<span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)">{
</span><span style="color: rgba(0, 128, 128, 1)">19</span>             timer = setTimeout(()=>{ fn.apply(<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">,args)},awit)
</span><span style="color: rgba(0, 128, 128, 1)">20</span> <span style="color: rgba(0, 0, 0, 1)">          }
</span><span style="color: rgba(0, 128, 128, 1)">21</span> <span style="color: rgba(0, 0, 0, 1)">    }
</span><span style="color: rgba(0, 128, 128, 1)">22</span> <span style="color: rgba(0, 0, 0, 1)"> }
</span><span style="color: rgba(0, 128, 128, 1)">23</span>
<span style="color: rgba(0, 128, 128, 1)">24</span> }</pre>
</div>
<p> </p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">export class Throttle{
</span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">*
*
* @param fn
* @param awit
* @param immediate true 是启用时间戳版，false 是启用定时器版，作用一样
</span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
static use(fn:Function,awit:number</span>=1000,immediate:<span style="color: rgba(0, 0, 255, 1)">boolean</span>=<span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">){
   </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">时间戳</span>
   <span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)">(immediate){
         let prevTime </span>= 0<span style="color: rgba(0, 0, 0, 1)">;
         </span><span style="color: rgba(0, 0, 255, 1)">return</span> (...args:any)=><span style="color: rgba(0, 0, 0, 1)">{
            let nowTime </span>=<span style="color: rgba(0, 0, 0, 1)"> Date.now();
            </span><span style="color: rgba(0, 0, 255, 1)">if</span>(nowTime-prevTime>=<span style="color: rgba(0, 0, 0, 1)">awit){
               fn.apply(</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">,args)
               prevTime</span>=<span style="color: rgba(0, 0, 0, 1)">nowTime
            }
         }
   }</span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)">{
         </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">定时器</span>
         let timer: NodeJS.Timeout|<span style="color: rgba(0, 0, 255, 1)">null</span><span style="color: rgba(0, 0, 0, 1)">;
         </span><span style="color: rgba(0, 0, 255, 1)">return</span> (...args:any)=><span style="color: rgba(0, 0, 0, 1)">{
            </span><span style="color: rgba(0, 0, 255, 1)">if</span>(!<span style="color: rgba(0, 0, 0, 1)">timer){
               fn.apply(</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">,args)
               timer </span>= setTimeout(() =><span style="color: rgba(0, 0, 0, 1)"> {
                     timer</span>&&<span style="color: rgba(0, 0, 0, 1)">clearTimeout(timer)
                     timer</span>= <span style="color: rgba(0, 0, 255, 1)">null</span><span style="color: rgba(0, 0, 0, 1)">
               }, awit);
            }

         }
   }


}

}</span></pre>
</div>
<p> </p><br><br>
来源：https://www.cnblogs.com/beyonds/p/13892548.html

頁: [1]

查看完整版本: typescript写防抖节流