uniapp 输入框防抖节流_offer-1-防抖和节流

最新推荐文章于 2024-03-28 09:15:14 发布

weixin_39946429

最新推荐文章于 2024-03-28 09:15:14 发布

阅读量127

点赞数

文章标签： uniapp 输入框防抖节流

本文链接：https://blog.csdn.net/weixin_39946429/article/details/111342013

版权

防抖和节流

防抖

定义：ns后执行x方法，如果在ns内多次调用x方法，那么n将会重新计时。

例子：用户在输入框内输入文字停止操作2s后进行搜索接口请求（如果输入一次就去请求一次对服务端压力很大也不符合常规逻辑）。

<!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>Document</title>
    <style>
        .inputClass {
            width: 200px;
            height: 30px;
        }
    </style>
</head>
<body>
    <h2>防抖和节流</h2>
    <input class="inputClass" id="search" type="text/javascript" placeholder="请输入搜索条件"/>
</body>
<script type="text/javascript">
    // fun函数x，wait等待ns
    var debounce = function(fun, wait) {
        // content记录执行上线文  timeId记录setTimeout的id args记录fun传递参数
        var content, timeId, args;

        var later = function() {
            // fun的执行上下文是content，参数是args
            fun.apply(content, args);
        }

        return function() {
            // 这里要记录this指向记录上下文，不然setTimeout执行时this指向window
            content = this;
            args = arguments;
            clearTimeout(timeId);
            timeId = -1;
            timeId = setTimeout(later, wait);
        }
    }

    document.getElementById('search').onkeyup = debounce(function(e) {
        console.log(`请求数据:${e.target.value}`);
    }, 2000);

</script>
</html>

节流

定义：ns内最多只触发一次x方法。当操作时间m < n时：有效触发操作为ms是的操作。当操作时间m >= n时：有效操作为ns的操作
例子：当用户频繁操作window.onresize时候，规定2s内最多有一次可以生效

var throttle = function(fun, wait) {
        var content, timeId, args;
        var canThrottle = true;

        var later = function() {
            canThrottle = true;
            fun.apply(content, args);
        }

        return function() {
            content = this;
            args = arguments;
            if(canThrottle) {
                canThrottle = false;
                setTimeout(later, wait)
            }
        }
    }

    window.onscroll = throttle(function(e) {
        console.log(`发生scroll距离顶部高度:${e.target.documentElement.scrollTop}`);
    }, 2000);

防抖和节流不同点

防抖是只要调用了函数那么定时器就会重新计算时间。节流是在一段时间内无论你触发多少次最多只会有一次生效。
例子：
对于防抖：如果0.5s,1s,1.5s分别触发了x方法，那么防抖策略会以1.5s那个时间为基准重新开启一个定时器，2s后也就是3.5s的时候触发x方法。
对于节流：如果0.5s,1s,1.5s分别触发了x方法，那么节流策略会在2s的时候执行1.5s那个操作。
防抖和节流是一种策略，实现方式可以有很多，例如underscore.js都有这方面的实现。

总结

介绍了防抖和节流的概念
例举防抖和节流在实际中应用场景
防抖和节流的不同点

weixin_39946429

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
uniapp 输入框防抖节流_offer-1-防抖和节流

防抖和节流防抖定义：ns后执行x方法，如果在ns内多次调用x方法，那么n将会重新计时。例子：用户在输入框内输入文字停止操作2s后进行搜索接口请求（如果输入一次就去请求一次对服务端压力很大也不符合常规逻辑）。 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
复制链接

扫一扫