js函数的节流和防抖

js函数的节流和防抖

用户浏览页面时会不可避免的触发一些高频度触发事件(例如页面 scroll ,屏幕

resize,监听用户输入等),这些事件会频繁触发浏览器的重拍(reflow)和重绘(repaint)这会严重耗费浏览器性能,造成页面

卡顿。

举几个例子:比如说我们在滚动事件中要做一个复杂的计算,或者做一个按钮的防二次点击操作的需求,这些需求都会在频繁的事件

回调中做复杂计算,很有可能导致页面卡顿,这时候我们可以将多次计算合并为一次计算,只在一个精确点做操作。这些事可以利用

函数的防抖来实现

函数的防抖,就是可以让这个函数每次触发的时间间隔小于wait,防抖的情况下就是假设用户一直触发我这个函数,这个函数只会调用一次,也就是在最后一次来进行调用,下面是一个简单的防抖函数代码实现

//func是你要绑定防抖操作的函数,wait是你想要这个函数多少ms之内不能连续触发,也就是假如你设置了100ms后触发,那这个函数在100ms之内如果又执行了就不会触发,直到超过100ms后这个函数才会执行
    function debounce(func, wait) {
        // 定时器变量
        var timer
        return function() {
            // 每次触发绑定的函数之前先清除定时器
            clearTimeout(timer)
            // 指定 xx ms 后触发
            timer = setTimeout(func, wait)
        }
    }

    // 实际想绑定在 scroll 事件上的 handler
    function realFunc(){
        console.log("success ")
    }

    // 采用防抖动
    window.addEventListener(‘scroll‘,debounce(realFunc,500))

假如说有现在这样一个需求,我们需要在滚动的时候实时的console.log(0),你懂得,在一次滚动过程中函数的执行频率特别快

,如果这个函数有更为复杂的方法,比如操作dom或者其他交互,会严重影响性能。这个时候我们就需要做一个节流的操作来减

少这个函数的调用频率

函数节流,就是将多次执行变成每隔一段固定的时间执行一次,会大大提高性能,比如我们可以设置一个高频率事件每隔100ms执行一次,这样性能就会得到很大的优化,下面是一个简单的节流函数的代码实现

//mustRunTime就是你想要设置的多少ms执行一次
    function throttle(func, wait, mustRunTime) {
        var timer,
            startTime = new Date();

        return function() {
            var _this = this,
                args = arguments,
                curTime = new Date();

            clearTimeout(timer);
            // 如果达到了规定的触发时间间隔,就触发这个func
            if(curTime - startTime >= mustRunTime){
                func.apply(_this,args);
                startTime = curTime;
            // 没达到触发间隔,重新设定定时器
            }else{
                timer = setTimeout(func, wait);
            }
        };
    };

    function realFunc(){
        console.log("success");
    }
    // 采用了节流函数
    window.addEventListener(‘scroll‘,throttle(realFunc,500,1000));

以上是本人对js函数节流和防抖的一些理解,希望对你能有所帮助~~~

原文地址:https://www.cnblogs.com/bai1218/p/9986934.html

时间: 2024-10-12 19:22:19

js函数的节流和防抖的相关文章

函数的节流和防抖

我们都知道频繁触发执行一段js逻辑代码对性能会有很大的影响,尤其是在做一些效果实现方面,或者逻辑中需要进行后端请求,更是会导致卡顿,效果失效等结果,所以在处理类似的情况时,可以考虑使用函数节流和函数去抖来解决,至于具体使用哪一种方式,根据实际情况分析定夺,先来讲解一些这两者的概念,以下是我个人的一些看法,若有不足,希望大家可以提出. 函数节流 在频繁触发的情况下,需要执行的逻辑只有执行完之后,才能继续执行下一次.示例代码: // 函数节流例子var can = true;window.onscr

underscore.js中的节流函数debounce及trottle

函数节流   throttle and debounce的相关总结及想法 一开始函数节流的使用场景是:放止一个按钮多次点击多次触发一个功能函数,所以做了一个clearTimeout setTimeout函数 clearTimeout(cancelTimer); cancelTimer =setTimeout(function(){ switchControl.switchAciontFactory(view, conf); },300) 代码的意思就不做多说了,实际上我无意间实现了一个debou

函数节流和防抖

函数的高阶使用2 我们来看一个分析: 如果要实现一个拖拽功能,需要一路监听 mousemove 事件,在回调中获取元素当前位置,然后重置dom的位置来进行样式改变.如果不加以控制,每移动一定像素而触发的回调数量非常惊人,回调中又伴随着 DOM 操作,继而引发浏览器的重排与重绘,性能差的浏览器可能就会直接假死. 在某些情况下会引发函数被非常频繁地调用,而造成大的性能问题.解决性能问题的处理办法就是函数节流和函数防抖. 函数防抖 是函数在特定的时间内不被再调用后执行. 也就是让某个函数在上一次执行后

节流和防抖的实现

1 防抖 + 定义:合并事件且不会去触发事件,当一定时间内没有触发这个事件时,才真正去触发事件 + 原理:对处理函数进行延时操作,若设定的延时到来之前,再次触发事件,则清楚上一次的延时操作定时器,重新定时 + 场景:keydown事件上验证用户名,输入法的联想 + 实现: function debounce(fn, delay) { var timer; return function() { var that = this; var args = arguments; clearTimeout

节流与防抖

节流与防抖 节流和防抖,都是优化高频率执行操作的有效手段. 防抖函数 debounce 功能:连续的事件,只在最后一次触发时执行操作 应用场景:最常见的就是输入框验证,如:用户注册时候的手机号码验证或邮箱验证.只有等用户输入完毕后,才检查格式是否正确:搜索框sug请求 防抖函数的实现 function debounce (fn, wait) { let timer = null; return function() { let args = arguments; let context = th

节流和防抖 区别和实现

节流 实现: /** * 函数节流:开始会执行一次,持续触发事件的话,每隔wait时间执行一次: * 应用场景mousemove, scroll等会连续执行的事件,比较适合应用于动画相关的场景. * @param fn 需要节流的函数 * @param wait 间隔时间 */ export function throttle(fn, wait = 1000) { let lastTime = 0; //上次执行的时间 return function (...args) { let now =

JS函数大全 莫名其妙找到的

1 .document.write(""); 输出语句 2 .JS中的注释为// 3 .传统的HTML文档顺序是:document->html->(head,body) 4 .一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,document) 5 .得到表单中元素的名称和值:document.getElementById("表单中元素的ID号").name(或value) 6 .

JSF页面中使用js函数回调后台bean方法并获取返回值的方法

由于primefaces在国内使用的并不是太多,因此,国内对jsf做系统.详细的介绍的资料很少,即使有一些资料,也仅仅是对国外资料的简单翻译或者是仅仅讲表面现象(皮毛而已),它们的语句甚至还是错误的,很可能会误导使用者. 相对来说,看国内的那些仅仅是翻译过来的文章或书籍不如直接看国外的官方文档或资料来的实在,在我讲述jsf页面中如何使用js调用后台bean方法之前,先给大家说几个国外的资料.在primefaces官方网站上,你可以搜索到几乎所有你需要的东西,primefaces官网为:http:

webBrowser调用外部js文件和js函数(转载)

原文链接:http://fy5388.blog.163.com/blog/static/56499537201012594314130/ webBrowser调用外部js文件和js函数 '第一种方法:webbrowser动态调用html和js代码,都是动态的:代码示例: webBrowser1.Navigate("about:blank");webBrowser1.Document.OpenNew(True);webBrowser1.Document.Write("<H