jQuery 按钮防抖函数debounce 立即执行和延后执行

最新推荐文章于 2024-05-07 10:28:08 发布

yu_wen_

最新推荐文章于 2024-05-07 10:28:08 发布

阅读量3.4k

点赞数 1

分类专栏： Web

原文链接：https://www.cnblogs.com/cc-freiheit/p/10827372.html

版权

Web 专栏收录该内容

12 篇文章

订阅专栏

最近在做轮播图，但是多次点击下一步会有bug，于是想到了防抖函数。但是看到的都是jquery延后执行的防抖函数，而且两种模式的防抖函数没有结合在一起，于是找了很久。

防抖函数

function debounce(func, wait,immediate) {//func是要执行的函数，wait是毫秒数，immediate是是否要执行的参数，true立即执行，false延后执行
        let timerout;
        return function () {
            let context = this;
            let args = arguments;
            clearTimeout(timerout)
            if (immediate){
                let callNow = !timerout;
                timerout = setTimeout(() => {
                    timerout = null;
                }, wait);
                if (callNow) func.apply(context, args);
            } else{
                timerout = setTimeout(function() {
                    func.apply(context, args);
                }, wait);
            }
        }
    }

调用的话，如果用的是jquery要把对象转换为dom对象

$("#content")[0].onclick = debounce(count,1000,true);

整体函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="content"
        style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;">
    </div>
</body>
<script src="jquery-1.12.4.js"></script>
<script>
    let num = 1;
    function count() {
        content.innerHTML = num++;
    };
    $("#content")[0].onclick = debounce(count,1000,true);

    function debounce(func, wait,immediate) {
        let timerout;
        return function () {
            let context = this;
            let args = arguments;
            clearTimeout(timerout)
            if (immediate){
                let callNow = !timerout;
                timerout = setTimeout(() => {
                    timerout = null;
                }, wait);
                if (callNow) func.apply(context, args);
            } else{
                timerout = setTimeout(function() {
                    func.apply(context, args);
                }, wait);
            }
        }
    }
</script>
</html>