防抖和节流的代码-----------造轮子（01）

最新推荐文章于 2023-07-02 17:41:41 发布

如果决定要走又何必挽留

最新推荐文章于 2023-07-02 17:41:41 发布

阅读量418

点赞数 2

分类专栏：造轮子文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_59076775/article/details/122459426

版权

造轮子专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一.防抖和节流都是用来减少出发的频率的问题,常见的应用场景, 防抖:点击登录按钮的时候,输入框输入自己想要的内容的时候,节流:滚动条等

二.防抖

(1)代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 通过cdn加载的形式引入jq -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    
</head>
<body>
    <button>点击发送ajax请求</button>
</body>
<!-- 导入axios -->

<script>

    let btn=document.querySelector('button')
    // console.log(btn);
    function fangdou(){
    let timer=null
    return function(){
        // -----------------------------------------------
        // 清除定时器
        // 通过作用域的查找机制可以访问
        clearTimeout(timer)
        // 开启定时器并且取名字
        timer=setTimeout(() => {
        console.log(123);
            $.ajax({
                url:'https://www.fastmock.site/mock/010910d86b5019f8016429f50c680e58/api/test',
                type:"get" , //请求方式
                dataType:"text",//设置接受到的响应数据的格式
            })
        }, 2000);
        // ----------------------------------------------
    }
}
btn.addEventListener('click',fangdou())
var aa=fangdou()
console.log(aa);
// 这一段代码是如何进行走的
// 注意返回的是 一个函数 ,但是调用了里面的代码
</script>
</html>

(2)图示

点击一次的结果发送一次请求

持续点击不执行

一段时间不触发后再执行

(3)代码思路的解析

点点击按钮之后会调用fangdou()这个函数, js是单线程的语言从上到下运行的,声明一个变量并将设置为空, let timer=null(为后面定时器取名字做准备), 为后面清除定时器做铺垫,通过return 出去一个函数以闭包的形式。通过clearTimeout(timer)清除定时器。通过代码:

timer=setTimeout(() => {
            $.ajax({

                url:'https://www.fastmock.site/mock/010910d86b5019f8016429f50c680e58/api/test'
                type:"get" , //请求方式

                dataType:"text",//设置接受到的响应数据的格式

            })

        }, 2000);

开启定时器,并且发送请求,总的来说,当用户点击按钮,如果2000之内点击会被清空,持续出发不执行,一段时间不触发之后在去执行。

有人就好奇,点击调用函数返回的不是一个函数吗?

var aa=fangdou()
console.log(aa);

打印的结果如图:

确实是一个函数。但是里面的函数也被调用过了。

三.节流

(1)代码：

用定时器实现节流的效果

var flag=true
    document.onscroll=function(){
      if (flag) {
        console.log(1);
        flag=false
        setTimeout(() => {
          flag=true
        }, 3000);
      }
    }

代码分析:

1.声明变量flag为true

var flag=true

2.如果为true的话,则立马打印1，然后值变成false,然后开启一个定时器, 过了三秒后结果又变成了true。

（2）布尔值的变化过程

(3)图示

如果决定要走又何必挽留

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
防抖和节流的代码-----------造轮子（01）

一.防抖和节流都是用来减少出发的频率的问题,常见的应用场景, 防抖:点击登录按钮的时候,输入框输入自己想要的内容的时候,节流:滚动条等二.防抖(1)代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫