JavaScript小知识点(二):函数防抖和节流
来源:互联网 发布:json 增加元素 编辑:程序博客网 时间:2024/04/30 10:08
函数防抖
函数防抖就是让某个函数满足等待某个时间内不再触发此函数后再执行, 而在这个等待时间内再次触发此函数, 等待时间会重新计算。例如监听滚动无限加载时,如果没有对请求函数进行防抖控制,用户拉到底部时会多次触发请求函数。进行防抖控制后,只有用户拉到底部并且在规定的事件内不再滚动才会触发请求函数。
function debounce(func, wait) { var timeout; return function () { var context = this; var args = arguments; clearTimeout(timeout) timeout = setTimeout(function(){ // 不改变this和event参数 func.apply(context, args) }, wait); }}div.onmouseover = debounce(someFunc, 1000)
如果希望在进行防抖控制前先让函数执行一次
function debounce(func, wait, immediate) { var timeout, result; return function () { var context = this; var args = arguments; if (timeout) clearTimeout(timeout); if (immediate) { // 如果已经执行过,不再执行 var callNow = !timeout; timeout = setTimeout(function(){ timeout = null; }, wait) if (callNow) func.apply(context, args) } else { timeout = setTimeout(function(){ func.apply(context, args) }, wait); } }}div.onmouseover = debounce(someFunc, 1000, true)
函数节流
如果需要持续触发事件,每隔一段时间,只执行一次事件,那就需要对函数进行节流
function throttle(func, wait) { var context, args; var previous = 0; return function() { var now = +new Date(); context = this; args = arguments; if (now - previous > wait) { func.apply(context, args); previous = now; } }}div.onmousemove = throttle(someFunc, 1000);
阅读全文
0 0
- JavaScript小知识点(二):函数防抖和节流
- 防抖函数和节流函数小列
- 函数防抖和节流
- 函数防抖和函数节流
- 节流和防抖
- 函数节流和防抖动
- 函数节流 + 函数防抖
- 函数节流与防抖
- 函数防抖与节流
- 函数的节流 & 防抖
- JS函数节流防抖
- 函数节流与防抖
- [JS]防抖和节流
- [JS]防抖和节流
- 函数节流与防抖(参考lodash)
- js函数防抖与函数节流
- 函数防抖与函数节流
- 函数节流与函数防抖
- JVM垃圾收集器
- 运维基础——Win7自动化截图时的设置
- mysql视图的作用(详细)
- oracle中文乱码
- java excel导出工具类
- JavaScript小知识点(二):函数防抖和节流
- tensorflow之dropout解决过拟合问题
- 【前端】vue.js环境配置以及实例运行简明教程
- windows中 tomcat 服务检测/重启 bat 脚本
- 3.1符号表
- 哈希表、散列表
- Nutz学习---连接操作数据库入门例子
- Date与SimpleDateFormat
- 【Android API】Android动画源码分析(一)