小火柴的博客笔记 小火柴的博客笔记
首页
学过的习
踩过的坑
想过的事
首页
学过的习
踩过的坑
想过的事
  • 学过的习

    • CSS的样式优先级权重
    • 事件冒泡和事件捕获
    • js模块可以通过两种方式对外暴露函数
    • js中的内存泄漏和内存溢出
    • js作用域链
    • 控制台暴露vue
    • es5常用知识总结
    • es6常用知识总结
    • es7常用知识总结
    • js模块化
    • nodeJs学习
    • node搭建服务器
    • webPack学习
    • js原型对象和原型链的理解
    • css阻塞与js阻塞
    • ajax的学习
    • 浏览器的重绘与重排
    • 函数防抖与函数节流学习记录
      • 浏览器储存学习
      • React起步
      • React的基本使用
      • React项目搭建
      • vue中attrs和listeners的使用
      • js的精度问题
      • React的状态管理
      • yarn和npm的对比
      • websocket的使用
    • 想过的事

    • 踩过的坑

    • 前端
    • 学过的习
    小火柴
    目录

    函数防抖与函数节流学习记录

    # 函数防抖:

    概念: 延迟要执行的动作,若在延时的这段时间内,再次触发了,则取消之前开启的动作,重新计时。比如电脑无操作1分钟后会进入休眠,当第40秒时鼠标被移动一下,重新计时1分钟。

    实现方式: 定时器。通过在监听的内部对定时器进行清除

    
    let input = document.getElementById('test');//键盘抬起获取输入框中的value值
    
    let timer = null;   //定时器的返回值,主要是为了清除定时器的传参
    
    input.addEventListener('keyup',()=>{
      let data = input.value;
      
      clearTimeout(timer);//清除定时器
      
      timer = setTimeout(()=>{
        //异步请求
      },500);
      
    });
    
    



    # 函数节流

    概念:设定一个特定的时间,让函数在特定的时间内只执行一次,不会频繁执行。比如在键盘按下的时候会触发一个操作,但是你一直按着的话,就会一直触发操作,函数节流就是为了避免这种情况。

    实现方式:定时器、标识 。通过标识的判断进行操作,操作完将标识置为false,通过定时器置回标识的状态。

      例子:在鼠标滚轮滚动的时候,每隔2秒钟,打印一次
      let body = document.getElementsByTagName('body')[0];
      
       //每次滚轮后都会将状态置为false,不会进入打印,等两秒后再将状态置为true。
      let flag =  true; 
      body.onscroll = ()=>{
        if(flag){
          console.log(111);
          flag = false;
          setTimeout(function(){
            flag = true;
          },2000)
        }
      }
    
    #JS
    浏览器的重绘与重排
    浏览器储存学习

    ← 浏览器的重绘与重排 浏览器储存学习→

    Theme by Vdoing | Copyright © 2021-2023 X match
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式