js 防抖是什么 JavaScript防抖怎么用

JS防抖其实也是用来提升网页性能的一种技术写法
防抖就是指当用户触发某个操作时,如果在指定的时间内再次触发该操作,那么就清除前面触发的操作,直到用户操作之后并且在指定的时间内不再操作我们再处理用户的请求

常见的场景:如用户在输入框输入内容,我们根据用户输入内容去查数据。

当用户输入文字时,监听input事件,那么用户每输入一个字符都会触发查询,这样就会发起很多个请求

js 防抖是什么 JavaScript防抖怎么用_第1张图片

js 防抖是什么 JavaScript防抖怎么用_第2张图片

所以,我们可以考虑一下,当用户输入关键字的时候并且在3秒内不再输入文字,我们才发请求,否则我们就什么都不做

所以我们应该每次都使用一个定时器来保存用户的操作,然后每次在指定时间内触发输入的时候都把上一次的定时器清除掉即可,这样就保证了只发一次请求

js 防抖是什么 JavaScript防抖怎么用_第3张图片

但是直接把定时器设置为全局变量容易导致变量在别处被修改,所以我们可以用函数封装一下定时器变量,方便给需要的函数调用

 

如图

js 防抖是什么 JavaScript防抖怎么用_第4张图片
在debounce里面定义变量存储定时器,并且我们可以设置fn,delay来接收外部传来的函数以及延迟的时间,然后我们返回一个函数即可

这样,当我们使用addEventListener('input',debounce(fn,delay))绑定事件时
debounce就会立即执行,所以实际input事件绑定的是return的那个函数
这样,当每次触发input时都会执行对应的函数,从而实现节省性能,实现只发最后一次请求的结果了


 

你可能感兴趣的:(js)