rxjs防抖和节流

应用场景 一般在搜索框中 即在搜索框中输入关键字去服务器请求对应数据。

rxjs写法

<head>

    <script src="https://cdn.bootcss.com/rxjs/6.0.0-alpha.3/Rx.min.js"></script>

</head>

<body>

防抖:<input type="text" placeholder="简拼/汉字/三字码" id="debounce"/><br/><br/>

节流:<input type="text" placeholder="简拼/汉字/三字码" id="throttle"/>

<script>

    var $debounce = document.getElementById('debounce');

    var $throttle = document.getElementById('throttle');

    const debounce$ = Rx.Observable.fromEvent($debounce, 'input');

    const throttle = Rx.Observable.fromEvent($throttle, 'input');

    // 节流

    debounce$

        .debounceTime(1000)

        .subscribe(function (e) {

            var value = e.target.value;

            console.log('防抖:'+value)

        });

    // 防抖

    throttle

        .throttleTime(1000)

        .subscribe(function (e) {

            var value = e.target.value;

            console.log('节流:'+value)

        });

</script>

</body>

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容