zoukankan      html  css  js  c++  java
  • JS debounce和throttle 去抖和节流

    JS中的高频事件有scroll recize mouseover。 如果频繁触发事件绑定函数,会导致浏览器性能上的损失。

    因此我们通常会添加延迟执行的逻辑。

    在underscore.js里面有debounce和throttle这两个方法。

    throttle创建并返回一个节流阀一样的函数,当重复调用函数的时候,至少每隔wait毫秒调用一次该函数

    var throttled = _.throttle(updatePosition, 100);
    $(window).scroll(throttled);
    

      

    debounce函数,去抖,是讲延迟函数的执行在函数最后一次调用的wait毫秒之后,比如当窗口停止改变大小之后重新计算布局。

    可以这样理解,像弹簧一样,只有你松开压住弹簧的手,弹簧才会向上弹起。

    也就是说当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间。

    1 var lazyLayout = _.debounce(calculateLayout, 300);
    2 $(window).resize(lazyLayout);
    View Code
    //简单实现一个debonce
    var debonce = function(fn,idle){ var last = null; return function() { var ctx = this, args = arguments; clearTimeout(last); last = setTimeout(function(){ fn.apply(ctx,args); },idle) } }

      

  • 相关阅读:
    mysql问题: alter导致速度慢
    MySQL的mysql_insert_id和LAST_INSERT_ID
    linux动态链接库---一篇讲尽
    jsoncpp第二篇------API
    SVN第二篇-----命令集合
    svn第一篇----入门指南
    数据结构之堆
    SZU4
    SZU1
    SZU2
  • 原文地址:https://www.cnblogs.com/bhaltair/p/6938834.html
Copyright © 2011-2022 走看看