手写节流防抖函数

最新推荐文章于 2023-03-27 11:55:30 发布

right前端

最新推荐文章于 2023-03-27 11:55:30 发布

阅读量149

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/eee66665/article/details/124241140

版权

节流函数

<body>
    <button id="app">点击</button>
</body>
<script>
    var app = document.querySelector("#app");
    var trottle = function(fn, delay) {
        var t = delay || 500;
        var timer = null;
        var flag = true;
        return function() {
            if (!flag) {
                return
            }
            flag = false;
            timer = setTimeout(function() {
                fn.apply(this, arguments)
                flag = true;
            }, t)
        }
    }
    app.onclick = trottle(function() {
        console.log("Ssss");
        console.log(this);
    }, 1700)
</script>

防抖函数

<body>
    <button id="app">点击</button>
</body>
<script>
    var app = document.querySelector("#app");

    var debounce = function(fn, delay) {
        var t = delay || 500;
        var timer = null;
        return function() {
            if (timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(function() {
                fn.apply(this, arguments);
            }, t)
        }
    }

    app.onclick = debounce(function() {
        console.log("Ssss");
        console.log(this);
    }, 700)
</script>

right前端

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
手写节流防抖函数

节流函数<body> <button id="app">点击</button></body><script> var app = document.querySelector("#app"); var trottle = function(fn, delay) { var t = delay || 500; var timer = null; var flag = tr
复制链接

扫一扫