js函数防抖

weixin_47207556

于 2021-08-22 22:22:33 发布

阅读量62

点赞数 1

分类专栏： js手写系列文章标签： js

本文链接：https://blog.csdn.net/weixin_47207556/article/details/119859073

版权

js手写系列专栏收录该内容

13 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数防抖</title>
</head>
<body>

    <div id="layout" style="height: 100px; width: 100px; background-color: mistyrose"></div>
    <script>
        var node = document.getElementById('layout')
        let count=0;
        function getUserAction(e) {

            console.log(this,e+":"+count)
            node.innerHTML = ++count;

        };

        node.onmousemove = debounceRe(getUserAction,3000)
                        // 要防抖的函数func
        function debounce(func,waitTime) {
            var timer
            //防抖函数必须仍然返回一个函数
            return function () {
                var context = this;
                var args = arguments;
                //每当wait时间内用户再次触发事件会导致重新计时
                clearTimeout(timer)
                timer = setTimeout(function () {
                    func.apply(context,args)
                },waitTime)

            }

        }

        /*函数防抖  为了防止用户疯狂刷新或者疯狂发送请求。
         */

    </script>
</body>
</html>