手写防抖、节流

最新推荐文章于 2023-09-25 19:58:54 发布

强壮的糙汉子

最新推荐文章于 2023-09-25 19:58:54 发布

阅读量115

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 servlet

本文链接：https://blog.youkuaiyun.com/m0_60622481/article/details/126841390

版权

JavaScript 专栏收录该内容

21 篇文章

订阅专栏

防抖：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text">
</body>
<script>
    var int = document.querySelector('input')
    int.oninput=debounce(task,500)
    function task() {
        console.log(this.value);
    }
    function debounce( fn,delay){
        var time=null
        return function(){
            if(time!=null){
                clearTimeout(time)
            }
            time=setTimeout(()=>{
                fn.call(this)
            },delay)
        }
    }
</script>
</html>

节流：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 10000px;
        }
    </style>
</head>

<body>

</body>
<script>
    window.onscroll = throttle(task, 500)

    //业务逻辑
    function task() {
        console.log('触发');
    }
    //节流函数
    function throttle(fn, delay) {
        var flag = true;
        var time = null;
        return function () {
            if (flag) {
                time = setTimeout(() => {
                    fn.call(this)// 注：此处需改变this指针，否则业务逻辑中的this指向window
                    flag = true;
                }, delay)
            }
            flag = false;
        }
    }

</script>

</html>