JavaScript小知识点(二):函数防抖和节流
2017-09-03 17:25
711 查看
函数防抖
函数防抖就是让某个函数满足等待某个时间内不再触发此函数后再执行, 而在这个等待时间内再次触发此函数, 等待时间会重新计算。例如监听滚动无限加载时,如果没有对请求函数进行防抖控制,用户拉到底部时会多次触发请求函数。进行防抖控制后,只有用户拉到底部并且在规定的事件内不再滚动才会触发请求函数。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);
相关文章推荐
- 节流函数和防抖函数学习
- [转载]函数节流与函数防抖
- JavaScript性能优化技巧之函数节流
- JavaScript 节流函数 Throttle 详解
- javascript高级系列之节流[throttle]与防抖[debounce ]
- JavaScript 节流函数 Throttle 详解
- JavaScript知识点总结---------005(函数与数组)
- javascript 函数节流
- javascript知识点函数及对象的基本介绍
- 函数节流 + 函数防抖
- javascript之函数节流
- JavaScript 节流函数 Throttle 详解
- Javascript知识点:IIFE - 立即调用函数
- javaScript 函数节流
- JavaScript知识点之“函数closure ”
- JavaScript 频繁发射事件处理的优化 --- 函数节流/事件稀释
- JavaScript 节流函数 Throttle 详解
- JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
- js函数节流和防抖
- Javascript 函数节流