背景：在监听浏览器滚动条的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. WIFI无线协议802.11a/b/g/n/ac的演变以及区别

    摘自:https://blog.csdn.net/Brouce__Lee/article/details/80956945 毫无疑问,WiFi的出现普及带给我们巨大的上网便利,所以了解一下WiFi对应 ...

  2. 题解 P4171 【[JSOI2010]满汉全席】

    什么,tarjan?那是什么? 码量太大,我选择放弃 为什么不用dfs写2-sat呢?他会伤心的说 这题2-sat的过程大佬们已经讲得非常清楚了,我就略微提一下,主要讲dfs的原理 2_sat原理 我 ...

  3. P2P平台爆雷不断到底是谁的过错？

    早在此前,范伟曾经在春晚上留下一句经典台词,"防不胜防啊".而将这句台词用在当下的P2P行业,似乎最合适不过了.就在这个炎热夏季,P2P行业却迎来最冷冽的寒冬. 引发爆雷潮的众多P ...

  4. JavaScript详解（二）

    js的流程控制 if语句: if (条件表达式A){ xx; }else if (条件表达式B){ xx; } else{ xx; } switch语句: switch (表达式){ case 值1: ...

  5. 论文：利用深度强化学习模型定位新物体(VISUAL SEMANTIC NAVIGATION USING SCENE PRIORS)

    这是一篇被ICLR 2019 接收的论文.论文讨论了如何利用场景先验知识 (scene priors)来定位一个新场景(novel scene)中未曾见过的物体(unseen objects).举例来 ...

  6. Anaconda环境安装

    Anaconda环境安装 一.Anaconda Anaconda是Python的一个开源的发行版本,里面包含了很多科学计算相关的包,它和Python的关系就像linux系统中centos和Ubuntu ...

  7. Python Numpy中数据的常用的保存与读取方法

    在经常性读取大量的数值文件时(比如深度学习训练数据),可以考虑现将数据存储为Numpy格式,然后直接使用Numpy去读取,速度相比为转化前快很多. 下面就常用的保存数据到二进制文件和保存数据到文本文件 ...

  8. java中 Spring 定时器定时任务Quartz的正确使用方法集配置

    定时任务我想大家都不默认,现在流行的框架spring就带了定时任何 我的个人网站(http://www.yzcopen.com)上用户上传的文件都是用这套定时任务执行定时清除 第一步:在applica ...

  9. 14）PHP，系统错误

    E_ERROR:系统严重错误 一发生,程序立即停止执行. 该错误一般希望马上. E_WARNING:系统警告 一发生,提示错误,并继续执行. 通常该错误希望能够在“下一工作日”去处理掉(解决). E_ ...

  10. [转载]Python方法绑定——Unbound/Bound method object的一些梳理

    本篇主要总结Python中绑定方法对象(Bound method object)和未绑定方法对象(Unboud method object)的区别和联系.主要目的是分清楚这两个极容易混淆的概念,顺便将 ...