js函数节流与防抖如何实现

来源：动视网责编：小采时间：2020-11-27 20:32:01

js函数节流与防抖如何实现

js函数节流与防抖如何实现:这篇文章主要介绍了关于js函数节流与防抖如何实现，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下一、防抖&节流在前端开发中有一部分用户行为会频繁的触发事件执行，而对于DOM的操作、资源加载等耗费性能的处理，很可能会导致界面卡顿

推荐度：

点击下载本文 文档为doc格式

导读js函数节流与防抖如何实现:这篇文章主要介绍了关于js函数节流与防抖如何实现，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下一、防抖&节流在前端开发中有一部分用户行为会频繁的触发事件执行，而对于DOM的操作、资源加载等耗费性能的处理，很可能会导致界面卡顿

这篇文章主要介绍了关于js函数节流与防抖如何实现，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

一、防抖&节流

　　在前端开发中有一部分用户行为会频繁的触发事件执行，而对于DOM的操作、资源加载等耗费性能的处理，很可能会导致界面卡顿，甚至浏览器奔溃。函数的节流与防抖就是为了解决类似需求而产生的。

　　1）节流

　　　　概念：函数的节流就是预定一个函数只有在大于等于执行周期时才会执行，周期内调用不会执行。好像一滴水只有积攒到一定重量才会落下一样。

　　　　场景：窗口调整(resize)、页面滚动(scroll)、抢购疯狂点击(movedown)

　　　　故事：阿里巴巴月饼门事件，中秋来临，阿里特意做了一个活动，抢月饼，但是每个人只能抢购一盒，有五位工程师写了js脚本，类似于12306的抢票软件，直接刷了一百多盒月饼，结果被开除了四个.其实对于他们来说并不是什么坏事，不知道有多少公司对他们敞开大门~那么如何解决这种问题呢，就用到了函数的节流

　　1.1）案例(限时抢购)

　　　　我写了这样一个简单的事件，如下

<button id='show'>抢购</button>
<div id="box">0</div>

JS:1 let oBtn=document.getElementById('show')
let oBox=document.getElementById('box')
oBtn.onclick=function(){
　　oBox.innerText=parseInt(oBox.innerText)+1
}

　　　　当我点击时，每点击一次，数量增加一，点击越快，增加越快，效果图如下：

　　1.2）脚本攻击：这种简单的数量增加很容易遭到脚本的攻击，从而造成很大的损失。代码如下

　　for(let i=0;i<100;i++){oBtn.click()}

　　　　效果图如下：　　

　　1.3）如何解决(节流)

　　　　上面并不是我们想要的结果，我们想要的是在规定时间内只能执行一次，比如1秒内只能执行一次.无论你点击多少次.

 <button id='show'>抢购</button>
 <div id="box">0</div>

JS: 1 let oBtn=document.getElementById('show');
 let oBox=document.getElementById('box');
 /*
 handle:buy函数
 wait:规定在一秒钟内只能执行一次
 */
 function throttle (handle, wait) {
 let lastTime = 0;
 return function (e) {
 let nowTime = new Date().getTime()
 if (nowTime - lastTime > wait) {
 handle();
 lastTime = nowTime;
 }
 }
 }
 function buy(){
 oBox.innerText = parseInt(oBox.innerText)+1
 }
 oBtn.onclick = throttle(buy, 1000)

　　　　效果图如下：

　　　　这样不仅可以达到想要的效果，还可以阻止恶意脚本的攻击.

　　2.防抖

　　　　概念：函数防抖就是函数需要频繁触发情况时，只有足够空闲的时候，才会执行一次。好像公交司机会等人都上车后才会开车一样.

　　　　场景：实时搜索(keyup)、拖拽(mousemove)

　　　　2.1）.案例(实时搜索)

　　　　　　在之前看一下这个过程图，百度的实时搜索.

　　　　　　在搜索nba的时候，并不是每输入一个字符，都会想服务器请求一次，而是在输入完成后发出一次请求。

 <input type= id=/>

JS:1 let oIpt = document.getElementById('ipt');
function ajax () {
 console.log(this.value)
}
oIpt.oninput = ajax;

　　　　　　效果图如下：

　　　　用户无论输入多快，都会发出请求，从而去加载服务器资源，对性能有很大的影响.

　　　　2.3)解决(防抖)

let oIpt = document.getElementById('ipt');
 let time = null;
 function debounce (handle, delay) {
 let time = null;
 return function () {
 let self = this,arg = arguments;
 clearTimeout(time);
 time = setTimeout(function () {
 handle.apply(self,arg);　　//this绑定
 },delay)
 }
 }
 function ajax (e) {
 console.log(e,this.value)
 }
 oIpt.oninput = debounce(ajax, 1000) //1s后发出请求

　　　　　　效果图：