防抖与节流

最新推荐文章于 2024-11-30 00:00:00 发布

婷婷T

最新推荐文章于 2024-11-30 00:00:00 发布

阅读量216

点赞数

分类专栏：前端（JavaScript/CSS/HTML）文章标签：防抖节流搜索优化

本文链接：https://blog.youkuaiyun.com/qq_41629684/article/details/118096912

版权

前端（JavaScript/CSS/HTML）专栏收录该内容

16 篇文章

订阅专栏

一、防抖：

指触发事后在n秒内函数只执行一次，若在n秒内再次触发则重新计算；

点击按钮 2秒后调用函数，再第1.5秒时又点了，

下拉触底加载下一页

二、节流

39滴焊锡：40 试一下38 38有的可以有的不行，然后用39

连续发生的事件在n秒内只执行一次函数

即时查询

三、防抖优化代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>防抖和节流，在代码中的优化</title>
</head>
<body>

<input id="search" type="text" oninput="count()"/>
<div id="content" style="height:150px;line-height: 150px;text-align: center;"></div>
<script>

    let num=1;
    let content=document.getElementById("content");
    function count(){
        content.innerHTML=num++;
    }
    content.onmousemove=count;

    //优化：方式一：防抖debounce

    //让输入完毕过两秒再查询（延迟执行）
    function debounce(func,wait){
        let timeout;//定时器
        return function(){
            if(timeout)
            clearTimeout(timeout);//取消之前的任务
            timeout=setTimeout(function () {
                func.apply(this);//执行func函数
            },wait)

        }
    }
    content.onmousemove=debounce(count,2000);


    //方式二：让输入完毕立即查询，过2秒才能再查询（立即执行）

    function debounceQ(func,wait){
        let timeout;
        return function(){
            if(timeout)
                clearTimeout(timeout);
            let callNow=!timeout;//类型转换
            timeout=setTimeout(()=>{ //增加一个定时器
                timeout=null;//清空当前定时器
            },wait)
            if(callNow) func.apply(this);//第一次执行
        }
    }
    content.onmousemove=debounceQ(count,2000);


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

四、节流优化代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>防抖和节流，在代码中的优化</title>
</head>
<body>

<input id="search" type="text" oninput="count()"/>
<div id="content" style="height:150px;line-height: 150px;text-align: center;"></div>
<script>

    let num=1;
    let content=document.getElementById("content");
    function count(){
        content.innerHTML=num++;
    }
    content.onmousemove=count;


    //节流
   //方式一：定时器：固定的时间去发请求
    function throttle(func,wait){
        let timeout;//定义一个定时器
        return function(){
            if(!timeout)//是否存在定时器
            timeout=setTimeout(()=>{ //创建一个定时器
                timeout=null;//清空当前定时器
                func.apply(this);
            },wait)
        }
    }
    content.onmousemove=throttle(count,2000);

    //方式二：时间戳

    function throttle2(func,wait){
        let pre=0;//上次记录时间
        return function(){
            let now=Date.now();//当前时间
            if(now-pre>wait){//当前时间-上次时间》等待时间
                func.apply(this);//执行函数
                pre=now;//重置上次记录时间
            }
        }
    }
    content.onmousemove=throttle2(count,2000);

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