网站设计与网页制作华为商城网站设计分析

1、防抖

短时间内重复执行相同操作时 只执行最后一次 

常见场景：浏览器输入文字后 下面会有模糊提示

实现思路：延时器控制事件在几秒后执行 每次触发事件时都会重置延时器

const fn = () => {// 先定义timeout 避免第一次触发时clearTimeout报错let timeout;// 每次触发事件 重置延时器clearTimeout(timeout)// 规定一秒后再执行timeout = setTimeout(()=>{// 需要执行的操作// ...},1000)
}

2、节流

规定时间内只执行一次 

常见场景：某一按钮点击后会添加dom节点 避免用户短时间内点击多次消耗浏览器性能

实现思路：开关控制事件是否执行 延时器控制开关是否打开

let flag = true // 开关const fn = () => {// 如果此操作在一秒内重复触发 就阻止执行if(!flag) return// 触发此操作时 将开关关闭 阻止第二次执行flag = false// 需要执行的操作// ...// 一秒后将开关打开setTimeout(()=>{flag = true},1000) 
}