前端JS防抖

最新推荐文章于 2024-08-03 17:05:14 发布

致HTC

最新推荐文章于 2024-08-03 17:05:14 发布

阅读量163

点赞数

分类专栏：前端JS 文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_40424347/article/details/115397289

版权

前端JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>防抖</title>
</head>
<body>
<input type="text" id="input-text">
<div id="show"></div>
</body>
<script> 
	window.onload = () => {
        let inpuText = document.getElementById('input-text');
        inpuText.onkeyup = debounce(setText, 500)
    }

    function setText() {
        let show = document.getElementById('show');
        let val = this.value;
        show.innerText = val;
    }

    let debounce = (func, wait) => {
        let timeout = null;
        let firstTime = true;//第一次执行不需要延迟 
        return function () {
            console.log(firstTime);
            if (firstTime) {
                func.apply(this, arguments);
                firstTime = false;
            }
            clearTimeout(timeout);
            timeout = setTimeout(() => {
                func.apply(this, arguments)
            }, wait)
        }
    }
</script>
</html>

总结

防抖(debounce)函数就是用来减少频繁调用事件处理函数。减少浏览器的负担，优化用户体验，多用于窗口的resize、scroll，输入框内容校验等操作时。

致HTC

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端JS防抖

JS防抖其实也是用来提升网页性能的一种技术写法防抖就是指当用户触发某个操作时，如果在指定的时间内再次触发该操作，那么就清除前面触发的操作，直到用户操作之后并且在指定的时间内不再操作我们再处理用户的请求常见的场景：如用户在输入框输入内容，我们根据用户输入内容去查数据。当用户输入文字时，监听input事件，那么用户每输入一个字符都会触发查询，这样就会发起很多个请求所以，我们可以考虑一下，当用户输入关键字的时候并且在3秒内不再输入文字，我们才发请求，否则我们就什么都不做所以我们应该每次都使用一个定时器来
复制链接

扫一扫

专栏目录