背景：在监听浏览器滚动条的scroll事件时该事件会触发很多次，这样当快速滚动时会有很差的性能，所以要限制事件触发的频率，可以防抖和节流，这里我记录简单的节流方法

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>事件节流</title>

  <style>

    .wrap {

      height: 10000px;

    }

  </style>

</head>

<body>

  <div class="wrap"></div>

  <script>

    var throttle = function (delay,interval, fn) {

      var startTime = new Date().getTime();

      var timer=null;

      return function () {

        var curTime = new Date().getTime();

        clearTimeout(timer);

        console.log(curTime - startTime, interval)

        if (curTime - startTime >= interval) {

          fn.apply(this, arguments)

          startTime = curTime

        }

        else{

          timer=setTimeout(fn,delay)

        }

      }

    }

    window.onscroll = throttle(500,2000, function () {

      console.log('我是水滴')

    })

  </script>

</body>

</html>

　　上面判断如果此时距离上次触发达到了某个时间就立刻触发，否则就延迟多少毫秒再触发，这样当持续滚动时代码会在每次滚动结束后一段时间内触发一次，同时也会在时间间隔超过一段时间内执行一次。

js事件节流的更多相关文章

  1. 也谈js函数节流

    1.什么是js函数节流 其本质就是不让某些代码(函数)在没有间断的情况下连续重复执行,目的就是让执行函数的请求停止了一段时间后才执行. 2.函数节流运用的场景 窗口大小的改变(resize事件),滚动 ...

  2. js 函数节流和防抖

    js 函数节流和防抖 throttle 节流 事件触发到结束后只执行一次. 应用场景 触发mousemove事件的时候, 如鼠标移动. 触发keyup事件的情况, 如搜索. 触发scroll事件的时候 ...

  3. dynamic-css 动态 CSS 库，使得你可以借助 MVVM 模式动态生成和更新 css，从 js 事件和 css 选择器的苦海中脱离出来

    dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...

  4. 什么是JS事件冒泡？

    什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理 程序或者事件返回true,那么 ...

  5. js事件技巧方法整合

    window.resizeTo(800,600); //js设置浏览器窗口尺寸 window.open (function(){ resizeTo(640,480);//设置浏览器窗口尺寸 moveT ...

  6. js事件浅析

    js中关于DOM的操作很多,因此js事件机制也就尤为重要. 事件绑定形式: 一. 内联形式 耦合度高,不利于维护 <button onclick="alert('你点击了这个按钮'); ...

  7. js 事件大全

    Js事件大全一般事件 事件 浏览器支持 描述onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClick IE4|N4|O 鼠标双击事件onMouseDo ...

  8. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

  9. JS事件

    JS事件:  声明:为了事件对象event跨浏览器兼容: var oEvent==ev||event;      所以在下面用到 event 的地方都用 oEvent 代替  1)doucument的 ...

随机推荐

  1. 【模式分解】无损连接&保持函数依赖

    首先引入定义 无损分解指的是对关系模式分解时,原关系模型下任一合法的关系值在分解之后应能通过自然联接运算恢复起来.反之,则称为有损分解. 保持函数依赖的分解指的是对关系分解时,原关系的闭包与分解后关系 ...

  2. zabbix3.4--配置微信告警

    1.注册企业微信 https://work.weixin.qq.com/ 2.注册好后登陆,点击“我的企业”,记录企业ID. 3.点击“应用管理”--“创建应用”,创建应用时添加接收告警的用户 4.添 ...

  3. jexus+.netcore+identityserver4 部署支持ssl（https)

    硬件环境: 在阿里云购买了一个centos 7 64 位服务器 软件: jexus ,dotnet core sdk 第一步安装dotnet core sdk: 先安装dotnet core sdk ...

  4. D. New Year and Conference（区间交，线段树）

    题:https://codeforces.com/contest/1284/problem/D 题意:给定n个1对的时间断,我是这么理解的,甲去参加a时间段的讲座,乙去参加b时间段的讲座,然后若这n对 ...

  5. C# 使用 HttpPost 请求调用 WebService (转)

    转自 https://www.cnblogs.com/Brambling/p/7266482.html 之前调用 WebService 都是直接添加服务引用,然后调用 WebService 方法的,最 ...

  6. C/C++ memcpy函数的用法

    功能 memcpy指的是c和c++使用的内存拷贝函数,memcpy函数的功能是从源src所指的内存地址的起始位置开始拷贝n个字节到目标dest所指的内存地址的起始位置中 头文件 所在头文件 <s ...

  7. Java实现卖票程序(两种线程实现)

    /** * 2019年8月8日16:05:05 * 目的:实现火车站卖票系统(第一种创建线程的方式) * @author 张涛 * */ //第一种方式直接继承Thread来创建线程 class T1 ...

  8. Linux 创建静态库.a

    gcc -c 只编译不连接 -o *.o(生成.o文件) ar crv  name.a   *.o *.o  (ar 命令把 .o文件打包成  name.a 静态库) 测试 name.a -L 紧跟链 ...

  9. python常见内置函数总结

    简单的内置函数 len    求长度 min   求最小值 max  求最大值 sorted  排序 reversed   反向 sum   求和 进制转换 bin   转为二进制 oct   转为八 ...

  10. 二十六、linux邮件服务器

    1.安装: yum install -y sendmail 因为是最小安装,需要包没有安装 yum  install -y  mailx 2.日志:/var/log/maillog 3.启动:/etc ...