节流函数其主要作用就是防止用户在短时间内多次触发该事件。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

</head>

<body><script>

  function throttle(fn, delay, duration) {

    var timer = null,

      begin = new Date();

    return function() {

      var context = this,

        args = arguments,

        current = new Date();

      clearTimeout(timer);

      if (current - begin >= duration) {

        fn.apply(context, args);

        begin = current;

      } else {

        timer = setTimeout(function() {

          fn.apply(context, args);

        }, delay)

      }

    }

  };

  function demo() {

    console.log(1)

  }

  /*参数说明：第一个参数是要执行的函数，第二个参数是说在500毫秒内连续触发了该函数只执行一次，第三个参数是说每隔200毫秒自动执行一次该函数*/

  window.onresize = throttle(demo, 500, 200)

  </script>

</body>

</html>

简单高效的方法：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

</head>

<body>

  <script>

  function throttle(method, context) {

    clearTimeout(method.tId);

    method.tId = setTimeout(function() {

      method.call(context);

    }, 300);

  };

  function demo() {

    console.log(1)

  }

  window.onresize = function(){
throttle(demo, window)
}

  </script>

</body>

</html>

js节流函数高级版的更多相关文章

  1. js节流函数和js防止重复提交的N种方法

    应用情景 经典使用情景:js的一些事件,比如:onresize.scroll.mousemove.mousehover等: 还比如:手抖.手误.服务器没有响应之前的重复点击: 这些都是没有意义的,重复 ...

  2. 关于js节流函数throttle和防抖动debounce

    废话不多说,直奔主题. 什么是throttle和debounce? 这两个方法的主要目的多是用于性能优化.最常见的应用尝尽就是在通过监听resize.scroll.mouseover等事件时候的性能消 ...

  3. js 节流函数 throttle

    /* * 频率控制 返回函数连续调用时,fn 执行频率限定为每多少时间执行一次 * @param fn {function} 需要调用的函数 * @param delay {number} 延迟时间, ...

  4. JS的函数节流（throttle）

    什么是函数节流? 介绍前,先说下背景.在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(其核心就是绑定mousemove),这种事件有一个特点,就是用户不必特地捣乱,他在 ...

  5. [概念] js的函数节流和throttle和debounce详解

    js的函数节流和throttle和debounce详解:同样是实现了一个功能,可能有的效率高,有的效率低,这种现象在高耗能的执行过程中区分就比较明显.本章节一个比较常用的提高性能的方式,通常叫做&qu ...

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

    函数节流   throttle and debounce的相关总结及想法 一开始函数节流的使用场景是:放止一个按钮多次点击多次触发一个功能函数,所以做了一个clearTimeout setTimeou ...

  7. JS奇淫巧技：防抖函数与节流函数

    应用场景 实际工作中,我们经常性的会通过监听某些事件完成对应的需求,比如: 通过监听 scroll 事件,检测滚动位置,根据滚动位置显示返回顶部按钮 通过监听 resize 事件,对某些自适应页面调整 ...

  8. JS 防抖函数和节流函数

    文章转载自:木上有水 什么是防抖?什么是节流? 工作中我们经常会用一些方法监听某些事件的完成,比如scroll.resize.keyup等. 常规事件触发的时候,比如scroll,会在短时间内触发多次 ...

  9. JS节流和防抖函数

    一. 实现一个节流函数 // 思路:在规定时间内只触发一次function throttle (fn, delay) {  // 利用闭包保存时间  let prev = Date.now()  re ...

随机推荐

  1. PCL点云曲面重建（1）

    在测量较小的数据时会产生一些误差,这些误差所造成的不规则数据如果直接拿来曲面重建的话,会使得重建的曲面不光滑或者有漏洞,可以采用对数据重采样来解决这样问题,通过对周围的数据点进行高阶多项式插值来重建表 ...

  2. eclipse中设置字体为VC经典字体Fixedsys

  3. 【转】腾讯移动品质中心TMQ [腾讯 TMQ] 测试管理平台大比拼

    简介 测试管理平台是贯穿测试整个生命周期的工具集合,它主要解决的是测试过程中团队协作的问题,比如缺陷管理.用例管理.测试任务管理等. 目前市面上比较流行的测试管理工具有QC. Mantis. BugZ ...

  4. Android单行本+多渠道脚本工具

    多渠道包的build相信广大android开发者应该很熟悉了,既可以用ant,写一写正则替换然后build出n个apk, 有时后情况会更复杂些,你比如你有一个app,需要build出一些单行本,代码基 ...

  5. 【转】Windows 7 API Internet Connection Sharing(ICS) 与 Wireless Hosted Network构建本地AP

    原文:http://hi.baidu.com/ritrachiao/item/bf7715e6bb8cb3a0c10d75be [此刻我要大大地记录一下!] 这个折腾了我好几天的Windows 7 A ...

  6. qualcomm sdm450 tinymix mic record

    最近需要使用tinymix配置主MIC和副MIC进行录音,一般副MIC都是拿来降噪用的.记录一下副MIC录音的方法. 没有找到高通的音频通路图,只能通过logcat,查看audio_route,然后找 ...

  7. ZBar与ZXing使用后感觉

    [原]ZBar与ZXing使用后感觉(上) 2014-3-18阅读2011 评论1 最近对二维码比较感兴趣,还是那句老话,那么我就对比了一下zxing和zbar 如果对于这两个的背景不了解的话,可以看 ...

  8. CI框架 -- 开发环境、生产环境

    开发者常常希望当系统运行在开发环境或生产环境中时能有不同的行为, 例如,在开发环境如果程序能输出详细的错误信息将非常有用,但是在 生产环境这将造成一些安全问题. ENVIRONMENT 常量 Code ...

  9. 使用ConcurrentLinkedQueue惨痛的教训【转】

    转自:http://blog.csdn.net/jackpk/article/details/49634577 服务端原本有个定时任务对一个集合ArrayList 中的消息做处理. 因为考虑到处理消息 ...

  10. JsonObject和Gson详解

    参考文件:http://www.cnblogs.com/xwdreamer/archive/2011/12/16/2296904.html一.JsonObject 1.JAR包简介 要使程序可以运行必 ...