Home >Web Front-end >JS Tutorial >js函数节流与防抖如何实现

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

不言
不言Original
2018-07-11 14:30:238424browse

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

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

一、防抖&节流

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

  1)节流

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

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

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

  1.1)案例(限时抢购)

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

<button id=&#39;show&#39;>抢购</button>
<div id="box">0</div>
JS:1 let oBtn=document.getElementById(&#39;show&#39;)
let oBox=document.getElementById(&#39;box&#39;)
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=&#39;show&#39;>抢购</button>
 <div id="box">0</div>
JS: 1 let oBtn=document.getElementById(&#39;show&#39;);
    let oBox=document.getElementById(&#39;box&#39;);
    /*
        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(&#39;ipt&#39;);
function ajax () {
    console.log(this.value)
}
oIpt.oninput = ajax;

      效果图如下:

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

    2.3)解决(防抖)

let oIpt = document.getElementById(&#39;ipt&#39;);
    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后发出请求

      效果图:

  这种方法可以解决多次请求的问题,对性能有很大的提高。

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐: 

对于JS模块化的解析

关于javascrip的立即执行函数的解析

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn