防抖与节流概念

最新推荐文章于 2022-09-17 16:29:46 发布

Mr.Herbert

最新推荐文章于 2022-09-17 16:29:46 发布

阅读量90

点赞数

分类专栏： js原生文章标签： js

本文链接：https://blog.csdn.net/china_wdx/article/details/119488428

版权

js原生专栏收录该内容

7 篇文章 0 订阅

订阅专栏

防抖与节流

//防抖

<body>
    <input type="text" id="inp">
    <script>
        var oInp = document.getElementById('inp');
        function ajax(e) {
            console.log(e, this.value);
        }
        function debounce(handler, delay) {
            var timer = null;
            return function () {
                var _self = this,
                    _arg = arguments;
                clearTimeout(timer);
                tiemr = setTimeout(function () {
                    handler.apply(_self, _arg);
                }, delay);
            }
        }
        oInp.oninput = debounce(ajax, 2000);
    </script>
</body>

在输入框输入完成后触发功能

// 节流

<body>
    <div id="show" style="margin-bottom: 10px;">0</div>
    <buttom id="btn" style="width:50px;height:30px;cursor: pointer;background-color: orange;">click</buttom>
    <script>
        var oDiv = document.getElementById('show');
        var oBtn = document.getElementById('btn');

        function throttle(handler, wait) {
            var lastTime = 0;
            return function (e) {
                var nowTime = new Date().getTime();
                if (nowTime - lastTime > wait) {
                    handler.apply(this, [arguments]);
                    lastTime = nowTime;
                }
            }
        }

        function buy(e) {
            console.log(this, e);
            oDiv.innerText = parseInt(oDiv.innerText) + 1;
        }
        oBtn.onclick = throttle(buy, 1000);
    </script>
</body>

节流概念：防止恶意脚本攻击，等到上次点击事件结束后，开启下次的点击事件

Mr.Herbert

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
防抖与节流概念

防抖与节流//防抖<body> <input type="text" id="inp"> <script> var oInp = document.getElementById('inp'); function ajax(e) { console.log(e, this.value); } function debounce(handler, delay) {
复制链接

扫一扫