防抖与节流
防抖
当一个事件会被不断的触发,并且会每一次触发都会调用一次回调函数,但是我们又不希望回调函数被调用的那么频繁时,我们就需要用到防抖。
举个例子:当用户在搜索框中输入自己想要搜索的内容时,我们会监听keyup事件,当发生keyup事件时,便会获取搜索框里的内容,并发送请求数据,但是每次keyup事件都进行请求数据的话,就会太过于频繁了,我们提出一个要求:当用户在一段时间内不再输入后,才向服务器发送请求。这时就可以使用防抖来实现。
防抖方法:(以搜索框为例)
1.首先定义一个防抖函数,在函数中创建一个定时器,用以请求数据,设置定时时间(这个定时时间是为了设置用户多久内不再输入才发送请求)
2.监听keyup事件,当keyup发生后清除创建的定时器,并调用定时器函数,不断循环,产生的效果就是:在延迟时间内,当事件不断发生时,就会不断的清除已有的定时器,然后又产生新的定时器,在整个过程中始终就只会存在一个定时器,当超过延迟时间后,这个定时器内的请求就发送出去了。也就是最终只会发送一次请求。
const timer = null
debounce