JavaScript小知识点（二）：函数防抖和节流

函数防抖

函数防抖就是让某个函数满足等待某个时间内不再触发此函数后再执行, 而在这个等待时间内再次触发此函数, 等待时间会重新计算。例如监听滚动无限加载时，如果没有对请求函数进行防抖控制，用户拉到底部时会多次触发请求函数。进行防抖控制后，只有用户拉到底部并且在规定的事件内不再滚动才会触发请求函数。

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);

转载于:https://www.cnblogs.com/Q-Zhan/p/7825650.html

JavaScript小知识点（二）：函数防抖和节流相关推荐

ajax，HTTP原理 : 网络传输协议，网页从输入url到渲染的流程，函数防抖和节流
一. 前后端交互流程 1.服务器 : 提供某种服务器的机器(计算机) qq音乐:音频服务器 , 迅雷:文件服务器 , qq邮箱:邮件服务器,爱奇艺:视频服务器,谷歌:web服务器 2. 前端访问服 ...
虾扯蛋之函数防抖和节流
背景今天在coding的时候,做了一个搜索框,也正是这个搜索框,让我和后台小伙伴直接由铁磁变为塑料兄弟.那到底发生啥了呢?其实很简单,其实很无奈,就是我用王者的手速把他的接口访问崩了! ...
防抖节流_每日一题手写函数防抖与节流
关注"前端学苑" ,坚持每天进步一点点「~函数防抖与节流 ~」每日一题,希望让爱学习.思考的前端技术伙伴在一起学习.复盘.成长. 基础知识要夯实,原理源码要深入,深度广度要扩展 ...
resize函数_每日一题手写函数防抖与节流
关注"前端学苑" ,坚持每天进步一点点「~函数防抖与节流 ~」每日一题,希望让爱学习.思考的前端技术伙伴在一起学习.复盘.成长. 基础知识要夯实,原理源码要深入,深度广度要扩展 ...
JavaScript 小知识点
原型链相关最详尽的 JS 原型与原型链终极详解 isNaN() 和 Number.isNaN() 的区别 isNaN() 是 ES1 规范: 是全局方法: 如果参数不是一个 Number 类型,会先 ...
什么是防抖、节流？小程序项目优化——防抖、节流
1.什么是防抖.节流?(个人理解) 防抖:延迟函数执行.设置定时器,通过定时器来执行函数,可以重置定时器防止函数高频率的执行导致加载缓慢.加重服务器负担. 节流:间隔执行函数.如果某段代码在一段时间内 ...
“约见”面试官系列之常见面试题第二十一篇之函数防抖和节流（建议收藏）
目录前言概念函数防抖(debounce) 函数节流(throttle) 常见应用场景函数防抖的应用场景函数节流的应用场景实现原理函数防抖(debounce) 函数节流(throttle) ...
防抖与节流方案_函数防抖和节流
在前端开发的过程中,我们经常会需要绑定一些持续触发的事件,如 resize.scroll.mousemove 等等,但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数. 通常这种情况下我 ...
菜鸟学习JavaScript小实验之函数引用
function tt() { alert(11); } var b = tt; var b1 = tt() ...

JavaScript小知识点（二）：函数防抖和节流

函数防抖

函数节流

JavaScript小知识点（二）：函数防抖和节流相关推荐

最新文章

热门文章