当前位置：网站首页>js函数防抖和函数节流及其使用场景

js函数防抖和函数节流及其使用场景

2022-08-02 08:23:00 【是小飞呀嘿】

 

目录

一、函数防抖

二、函数节流 

一、函数防抖

使用场景：【永远在执行最后一次】  回到顶部，立即（实时）搜索 

代码段 


<!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>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
    <h1>函数防抖</h1>
</body>
</html>
    //函数防抖使用场景：【永远在执行最后一次】  回到顶部，立即（实时）搜索
    // debounce()  函数进入页面立即执行
    // debounce()  必须返回函数  事件只能调用函数

    //防抖函数
    function debounce(callback,time = 300){
        let t;
        return function(){
            clearTimeout(t);
            t =  setTimeout(callback,time);
        }
    }
    
    //绑定滚动条事件
    window.onscroll = debounce(function(){
        console.log("调用了1次");
    },500);

效果图 

 

二、函数节流 

 

 使用场景：所有的数据请求【按钮】  下拉刷新

代码段 


<!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>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
    <h1>函数节流</h1>
</body>
</html>
 //  所有的数据请求【按钮】  下拉刷新

    //  函数节流
    function throlle(callback,time){
        let lasttime = new Date().getTime();
        return function(){
            let now = new Date().getTime();
            if(now - lasttime > time){
                callback();
                lasttime = now;
            }
        }
    }

/* 
    window.onscroll = function(){
        console.log("调用了1次");
    } */

    window.onscroll = throlle(function(){
        console.log("调用了1次");
    },1500);

效果图 

 

原网站

版权声明
本文为[是小飞呀嘿]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_62283164/article/details/126103723

边栏推荐

猜你喜欢

随机推荐