js事件节流
背景：在监听浏览器滚动条的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事件节流的更多相关文章
- 也谈js函数节流
1.什么是js函数节流 其本质就是不让某些代码(函数)在没有间断的情况下连续重复执行,目的就是让执行函数的请求停止了一段时间后才执行. 2.函数节流运用的场景 窗口大小的改变(resize事件),滚动 ...
- js 函数节流和防抖
js 函数节流和防抖 throttle 节流 事件触发到结束后只执行一次. 应用场景 触发mousemove事件的时候, 如鼠标移动. 触发keyup事件的情况, 如搜索. 触发scroll事件的时候 ...
- dynamic-css 动态 CSS 库，使得你可以借助 MVVM 模式动态生成和更新 css，从 js 事件和 css 选择器的苦海中脱离出来
dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...
- 什么是JS事件冒泡？
什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理 程序或者事件返回true,那么 ...
- js事件技巧方法整合
window.resizeTo(800,600); //js设置浏览器窗口尺寸 window.open (function(){ resizeTo(640,480);//设置浏览器窗口尺寸 moveT ...
- js事件浅析
js中关于DOM的操作很多,因此js事件机制也就尤为重要. 事件绑定形式: 一. 内联形式 耦合度高,不利于维护 <button onclick="alert('你点击了这个按钮'); ...
- js 事件大全
Js事件大全一般事件 事件 浏览器支持 描述onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClick IE4|N4|O 鼠标双击事件onMouseDo ...
- 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...
- JS事件
JS事件: 声明:为了事件对象event跨浏览器兼容: var oEvent==ev||event; 所以在下面用到 event 的地方都用 oEvent 代替 1)doucument的 ...
随机推荐
- 吴裕雄--天生自然TensorFlow2教程：numpy [ ] 索引
import tensorflow as tf a = tf.ones([1, 5, 5, 3]) a.shape a[0][0] numpy : 索引 a = tf.random.normal([4 ...
- C#判断两个字符串是否相等的方法 ，还有char赋空值办法。
string str1="Test"; string str2 = "Test"; if (str1==str2) //第一种判断方式 { //第二种判断方式 ...
- 豆瓣爬虫Scrapy“抄袭”改写
主要是把项目从docker里面扒拉出来,但是扒拉完好像又没有什么用,放在docker里面运行多好. 源码下载下面主要记一下改动的地方吧. 配置:在database.py中改掉自己的数据库配置. 表结构 ...
- Python验证6174猜想
num=int(input()) c=num while c!=6174: digits=list(str(c)) digits.sort(reverse=True)#排列最大数和最小 ...
- win32框架
win32的框架 1.入口函数 2.窗口注册类信息 3.窗口创建 4.显示窗口 5.更新窗口 6.消息循环 7.入口函数结束 WNDCLASSEX wcex;窗口类结构 wcex.cbSize = s ...
- MySQL--启动和关闭MySQL服务
1.Windows下 启动服务 mysqld --console 或 net start mysql 关闭服务 mysqladmin -uroot shudown 或 net stop mysql 2 ...
- Maven依赖三板大斧
一:问题出现场景 记得有一次,面试时候面试官问了个问题,来哥们,“你们项目是maven搭建哈,你的项目里如果出现架包冲突了,你们怎么解决的?”. 我:......,装作很淡定,我们是通过报错,定位哪个 ...
- HDU - 4578 线段树+三重操作
这道题自己写了很久,还是没写出来,也看了很多题解,感觉多数还是看的迷迷糊糊,最后面看到一篇大佬的才感觉恍然大悟. 先上一篇大佬的题解:https://blog.csdn.net/aqa20372995 ...
- Kubernetes 问题定位技巧：分析 ExitCode
使用 kubectl describe pod 查看异常的 pod 的状态,在容器列表里看 State 字段,其中 ExitCode 即程序退出时的状态码,正常退出时为0.如果不为0,表示异常退出,我 ...
- pycharm、Django+node.js、vue搭建web项目
参考文章:https://www.wandouip.com/t5i35466/ 在此感谢 本篇接着上一篇:windows10使用npm安装vue.vue-cli 首先Django项目是搭建好的,就是 ...