1 防抖 debounce

debounce防抖 :在事件被触发n秒后执行,如果在此时间再次触发事件,则重新开始计时。例如联想搜索

html
1
<input type="text" id="phone">
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 需要触发的函数
function debounce(d) {
console.log('输入完毕后联想搜索', d)
}

let inputDoc = document.getElementById('phone')
// 输入触发的事件
function getPhone(func, deplayTime) {
let timer;
return (d) => {
clearTimeout(timer)
timer = setTimeout(() => {
func(d);
clearTimeout(timer)
}, deplayTime)
}
}

let getPhoneDebounce = getPhone(debounce, 2000)
inputDoc.addEventListener('keyup', (e) => {
getPhoneDebounce(e.target.value)
})

2 节流 throttle

throttle节流:如果持续触发一个事件,在一定时间内只执行一次。例如重复点击

html
1
<button id="clickid">节流</button>
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 节流
function throttle() {
console.log('点击了')
}
let clickidDoc = document.querySelector('#clickid')

function nextClick(func, deplayTime) {
let timer;
return () => {
// 定时器存在,无法点击
if (timer) {
console.log('禁止点击了')
} else {
func();
timer = setTimeout(() => {
clearTimeout(timer)
timer = null;
}, deplayTime)
}
}

}
let clickButton = nextClick(throttle, 200);
clickidDoc.addEventListener('click', () => {
clickButton()
})
相关文章
评论
分享
  • 城市三联

    123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263...

    城市三联
  • 老式浏览器是否支持字符串比较正则u修饰符字符模式

    检测当前引擎是否支持u修饰符12345678function hasRegExpU(){ try{ var pattern = new RegExp('.',u); return ...

    老式浏览器是否支持字符串比较正则u修饰符字符模式
  • 随机数的生成

    没有指定范围生成 Math.floor(Math.random()*Number) 从0开始到Number,但不包含Number指定范围随机数的生成 Math.floor(Math.random()*(max-min+1)+min) ...

    随机数的生成
  • js精度损失问题

    所有计算机编程语言里浮点数计算会存在精度丢失问题(或称舍入误差),其根本原因是二进制和实现位数限制有些数无法有限表示在我的前端工作中,整数的运算很少出现精度损失的问题,除非超过Math.pow(2,53)的超大整数,但是在电商项目中,...

    js精度损失问题
  • 随机十六进制颜色

    const randomHexColorCode => () { let n = (Math.random() * 0xfffff * 1000000).toString(16); ret...

    随机十六进制颜色
  • 各种去重的效率

    1. set方法去重123function unique(){ return Array.from(new Set(this))} 1234567const arr =[]for (let i = 0; i ...

    各种去重的效率
  • 手写bind和call及apply

    自定义bind和call及apply重要的是this和参数```bash js// 设置公共this方法let pubContext = funtion(){return this} Function.prototype._bind ...

    手写bind和call及apply
  • 全网灰暗效果

    css处理全网灰暗css12345678filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms...

    全网灰暗效果
  • 校验工具类函数

    验证邮政编码1234/** * @param { string } value */export const isPostcode = value => /^(0[1-7]|1[0-356]|2[0-7]|3...

    校验工具类函数
  • 观察者模式和发布订阅模式

    观察者模式和发布订阅模式观察者模式:是指一个对象(subject)维持一个依赖列表Observer,当主题状态发生变化的时候,会通知观察者集合。发布和观察者都能看到对方都知道对方的存在。比如事件触发。发布订阅模式:观察者和订阅者关联。...

    观察者模式和发布订阅模式
Please check the comment setting in config.yml of hexo-theme-Annie!