防抖和节流函数是我们经常用到的函数,在实际的开发过程中,如 scroll、resize、click、键盘等事件很容易被多次触发,频繁的触发回调会导致页面卡顿和抖动,为了避免这种情况,需要使用节流和防抖的方法来减少无用的操作和网络请求,也是面试中经常遇到的问题,需要牢牢掌握。
都是闭包的形式存在的.
他们通过对事件的回调函数进行包裹、以保存自由变量的形式来缓存时间信息,最后使用 setTimeout 来控制事件的触发频率。
节流(Throttle)的中心思想在于:在某段时间内不过你触发了多少次,我都只认第一次,并且在计时结束时给出响应。
/**
* 函数节流
* 作用:一段时间内的多次操作,只按照第一次触发开始计算,并在计时结束时给予响应。
* 场景:如输入搜索功能
* @param fn 需要进行节流操作的事件函数
* @param interval 间隔时间
* @returns {Function}
*/
function throttle(fn, interval = 500) {
let last = 0;
return function (...args) {
let now = +new Date();
if (now - last > interval) {
last = now;
fn.call(this, args);
}
};
}
/**
* 步骤
* 接受一个函数,和一个触发间隔时间,时间默认是 500ms
* 默认赋值为0
* 将多个参数解构为一个参数数组
* 记录本次触发回调的时间
* 判断上次触发的时间和本次之间的间隔是否大于我们设定的阈值
* 将本次触发的时间赋值给last,用于下次判断
* 使用call调用传入的回调函数,并传入参数
*
*/
使用:在 onScorll 中使用节流
// 使用 throttle 来包装 scorll 的回调函数,设置间隔时间为1s
const better_scorll = throttle(() => {
console.log("触发了滚动事件");
}, 1000);
document.addEventListenner("scorll", better_scorll);
// 1s内,无论触发多少次,都只从第一次触发之后的1s后给出响应。
防抖的中心思想在于:我会等你到底。在某段时间内,不管你触发了多少次回调,我都只认最后一次
/**
* 函数防抖
* 作用:一段时间内的多次操作,只执行最后一次。
* 场景:如点击登录/注册/支付等按钮时
* @param fn 需要进行防抖操作的事件函数
* @param delay 延迟时间
* @returns {Function}
*/
function debounce(fn, delay = 500) {
let timer = null;
return function (...args) {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
fn.call(this, args);
}, delay);
};
}
/**
* 接受一个函数,和一个触发间隔时间,时间默认是 500ms
* 定时器 id 默认赋值为null
* 将多个参数解构为一个参数数组
* 判断timer是否存在,如存在就取消定时器
* 然后创建一个新的定时器,并将id赋值给timer
* 然后如果再次点击重复上面的操作,一直到delay时间内没点时,定时器执行
* 执行时:使用call调用传入的回调函数,并传入参数
*
*/
使用:在 onScorll 中使用防抖
// 用debounce来包装scroll的回调
const better_scroll = debounce(() => console.log("触发了滚动事件"), 1000);
document.addEventListener("scroll", better_scroll);
debounce 的问题是它太有耐心了,试想,如果用户的操作十分频繁————他每次都不等 debounce 设置的 delay 的时间结束就进行下一次操作,于是每次 debounce 都会为用户重新生成定时器,回调函数被延迟了一次又一次,用户迟迟得不到响应,用户也会对这个页面产生“页面卡死”了的观感。
为了避免弄巧成拙,我们需要借力 Throttle 的思想,打造一个“有底线”的 debounce ,等你可以,但我有我的原则:delay 时间内,我可以为你重新生成定时器,但是只要 delay 时间一到,我就必须给用户一个响应。
这种 Throttle 和 debounce 合体的思想,已经被很多成熟的前端库应用到他们的加强版 throttle 函数中了。
/**
* 加强版节流函数
* 作用:delay时间内的多次操作将会重新生成定时器,但只要delay时间一到就执行一次。
* 场景:如点击登录/注册/支付等按钮时
* @param fn 需要进行防抖操作的事件函数
* @param delay 延迟时间
* @returns {Function}
*/
function throttle(fn, delay = 500) {
let last = 0;
let timer = null;
return function (...args) {
let now = +new Date();
if (now - last < delay) {
// 如果间隔时间小于我们设定的阈值,则重新生成一个定时器
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
last = now;
fn.call(this, args);
}, delay);
} else {
// 如果 间隔时间大于设定的阈值,就执行一次。
last = now;
fn.call(this, args);
}
};
}
/**
* 接受一个函数和延迟时间,延迟时间默认是500ms
* 定义一个开始执行的时间戳和定时器id,赋予默认值
* 返回一个函数,并将参数转为数组。
* 函数内,拿到当前的时间戳
* 判断,是否小于间隔时间:
* 小于:则清楚定时器,然后重新生成定时器。定时器内直接赋值,然后call函数,
* 大于:直接赋值,然后call函数,
*/
使用:在 onScorll 中使用加强版 throttle
// 用throttle来包装scroll的回调
const better_scroll = throttle(() => console.log("触发了滚动事件"), 1000);
document.addEventListener("scroll", better_scroll);
我们都知道addEventListener() 的参数约定是:useCapture是可选参数,默认值为false,目前DOM 规范做了修订:addEventListener() 的第三个参数可以是个对象值了。passive就是告诉浏览器我可不可以用stopPropagation...
在WebApp或浏览器中,会有点击返回、后退、上一页等按钮实现自己的关闭页面、调整到指定页面、确认离开页面或执行一些其它操作的需求。可以使用 popstate 事件进行监听返回、后退、上一页操作。
具有层级关系的结构中,使用了pointer-events:none 属性将会使当前元素中的事件不会被捕获,从而实现了点穿的效果。而当代码示例中假如top元素具有子元素且显示指定pointer-events属性不为none的时候,top元素注册的事件将会被捕获/冒泡触发
事件对象 event,JavaScript 将事件event作为参数传递,IE中把 event 事件对象作为全局对象 window 的一个属性,获取鼠标在网页中的坐标 = 鼠标在视窗中的坐标 + 浏览器滚动条坐标
何为默认事件?比如 a 会跳转页面,submit 会提交表单等。普通js方法:e.preventDefault()函数。Vue.js方法: .prevent 是vue 的内置修饰符,调用了 event.preventDefault()阻止默认事件
js keyup、keypress和keydown事件都是有关于键盘的事件,当一个按键被pressed 或released在每一个现代浏览器中,都可能有三种客户端事件。
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O的模型,使其轻量又高效。比如,文件操作中的fs事件流,网络编程所用到的tcp,http模块等,当你回想自己写的程序后,会发现很多操作都基于事件驱动,Events类。
在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错;当然还有使用纯JS实现的小代码段。我这里整理了纯CSS实现方式,给需要的人和给自己做个笔记:实现原理利用CSS伪类:target
我做的是一个table的编辑功能,当移入某行的时候展示编辑状态,在移出某行的时候显示的是原始状态,此时遇到一种情况,就是.当mousenter事件触发之后,由于鼠标移动得太快,同一个tr上绑定的mouseleave事件压根儿就没有执行。
js事件传播流程主要分三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。在我们平常用的addEventListener方法中,一般只会用到两个参数,一个是需要绑定的事件,另一个是触发事件后要执行的函数
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!