首页 > 编程语言 >JavaScript进阶--节流防抖以及技巧打磨

JavaScript进阶--节流防抖以及技巧打磨

时间:2024-10-15 12:53:26浏览次数:17  
标签:box function 防抖 const 进阶 -- obj console log

打磨技巧

深浅拷贝

只针对引用类型

浅拷贝

拷贝的是值,但引用数据类型的值为地址

方法:

  • Object.assign(newobj,oldobj)
  • Array.concat(newArr,oldArr)

配合展开运算符...

比较复制

复制相当于把将要复制对象的地址,直接进行获取,而不是创建一个新的对象,赋予属性的值和名

 //实现效果分隔线函数
    const cut = () => { console.log("--------"); }
    //复制
    const obj = {
      name: 'jason',
      age: 18,
      family: {
        baby: 'small jason'
      }
    }
    const o = obj;
    //若改变o中属性的值,obj的属性值也会发生改变
    o.age = 20;
    console.log(o.age);
    console.log(obj.age);
    cut();

    //浅拷贝assign
    const obj1 = { ...obj };
    obj1.age = 19;
    //若更改了里面第二层及以上的内容,原来拷贝的对象中的内容也会发生改变
    obj1.family.baby = 'tall jason';
    console.log(obj1.family);
    console.log(obj.family);
    console.log(obj1.age);
    console.log(obj.age);
    cut();
    //浅拷贝concat
    const a = [1, 2, 3];
    const b = [1, 2, 3, [1, 2, 3]];
    const a1 = [...a];
    const b1 = [...b];
    a1[2] = 4;
    console.log(a[2]);
    console.log(a1[2]);
    b1[3][1] = 4;
    //若更改了里面第二层及以上的内容,原来拷贝的对象中的内容也会发生改变
    console.log(b[3][1]);
    console.log(b1[3][1]);
    cut();
深拷贝

三种方法

  • 递归实现
  • lodashcloneDeep(obj)
  • 利用JSON转化为字符串再转换为对象进行完成

递归实现

先复习递归函数

在函数体中调用自身,并带有条件退出函数的函数

小案例

 function getTime() {
      document.querySelector('div').innerHTML = new Date().toLocaleString();
      setTimeout(getTime, 1000);
    }
    getTime();

三种方法的实现

//定义输出分隔线函数
    function cut() {
      console.log("-------------------");
    }
    //1.递归函数实现
    const obj = {
      name: 'jason',
      age: 28,
      family: {
        baby: "small jason",
        toy: ['car', 'pani']
      }
    }
    const obj1 = {};
    function deepcopy(newobj, oldobj) {
      for (let k in oldobj) {
        //判断当前的属性值是否为数组或者对象,是则进行递归调用,换其他参数
        if (oldobj[k] instanceof Array) {
          newobj[k] = [];
          deepcopy(newobj[k], oldobj[k]);
        } else if (oldobj[k] instanceof Object) {
          newobj[k] = {};
          deepcopy(newobj[k], oldobj[k]);
        } else {
          //相当于浅拷贝
          newobj[k] = oldobj[k];
        }
      }
    }
    //调用深拷贝函数
    deepcopy(obj1, obj);
    obj1.family.baby = 'tall jason';
    obj1.family.toy[1] = 'plane';
    console.log(obj1.family);
    console.log(obj.family);
    cut();

    //2.lodash中的deepcopy()方法


    const obj2 = _.cloneDeep(obj);
    obj2.family.baby = 'tall jason';
    obj2.family.toy[1] = 'plane';
    console.log(obj2.family);
    console.log(obj.family);
    cut();
    //3.JSON字符串再转换为对象,开辟一个新的对象
    const obj3 = JSON.parse(JSON.stringify(obj));
    obj3.family.baby = 'tall jason';
    obj3.family.toy[1] = 'plane';
    console.log(obj3.family);
    console.log(obj.family);

第二种方法需要有lodash的文件

异常处理

try catch finally throw

try中包含的是要检查是否有异常的代码,catch中为抓取异常后的操作,finally为无论如何都会执行的代码

throw用于在函数体中应有的异常,或者是一些常见异常的抛出

 const noHave = new Error('参数不能为空孩子');
    function add(x, y) {
      if (!x || !y) {
        throw noHave;
      }
      console.log(x - (-y));

    }
    let x = 1;
    let y = 2;
    try {
      add(x);
      add(y);
      add(x, y);
    } catch (noHave) {
      alert('你应该重新输入两个参数')
      x = prompt('输入x');
      y = prompt('输入y');
      add(x, y);
    } finally {
      console.log('你的函数总该运行成功了把');

    }

this指向

  • 普通函数谁调用就指向谁

  • 箭头函数并不存在this

    默认绑定外层的this,若外层没有,则向更外层进行寻找,都找不到,默认为window

  //1.普通函数
    console.log(this);
    setTimeout(function () {
      console.log(this);
    }, 1000)
    const obj = {
      name: 'jason',
      play: function () {
        console.log(this);
      }
    }
    obj.play();

    //2.箭头函数
    const obj1 = {
      name: 'jason',
      play: () => {
        console.log(this); //windows
      }
    }
    const btn = document.querySelector('button')
    btn.addEventListener('click', () => {
      console.log(this);

    })

改变this指向

  • call()
  • apply()
  • bind()
//call(this,其他参数)
    function fn(x, y) {
      console.log(this);
      console.log(x + y);

    }
    const obj = {
      name: 'jason'
    }
    // fn();
    fn.call(obj, 1, 2);
    //apply(this,[其他参数])
    const obj1 = {
      name: 'Jason'
    }
    const a = [1, 2];
    fn.apply(obj1, a);

    //bind(this) 不调用函数,返回一个函数,改变了this指向
    const obj2 = {
      name: 'biber'
    }
    const fn1 = fn.bind(obj2);
    fn1(1, 2);

防抖(debounce)

单位时间内,频繁触发事件,只执行最后一次

如王者回城,搜索框,及手机号验证输入 ==> 提高性能,减少服务端请求压力

在这里插入图片描述

实现:

  • lodash提供的防抖函数
  • 手搓一个出来
let i = 0;

    function mouseMove() {
      i++;
      box.innerHTML = i;
    }
    const box = document.querySelector('.box');
    box.innerHTML = i;
    box.addEventListener('mousemove', _.debounce(mouseMove, 500))
  let i = 0; //盒子里面的变量
    const box = document.querySelector('.box');
    box.innerHTML = i;
    function mousemove() {
      i++;
      box.innerHTML = i;
    }
    function debounce(fn, t) {
      let timer;
      //使用函数来作为返回,使用了闭包,timer只可以被返回后的函数修改,外界无法修改timer
      return function () {
        if (timer) {
          clearTimeout(timer);
        }
        timer = setTimeout(fn, t);
      }
    }
    box.addEventListener('mousemove', debounce(mousemove, 300));

节流 throttle

单位时间内,频繁触发事件,只执行一次

如王者技能冷却

在这里插入图片描述

实现:

  • lodash提供的节流函数
  • 手搓一个
 const box = document.querySelector('.box');
    let i = 0;
    box.innerHTML = i;
    function mousemove() {
      i++;
      box.innerHTML = i;
    }
    box.addEventListener('mousemove', _.throttle(mousemove, 500));
 const box = document.querySelector('.box');
    let i = 0;
    box.innerHTML = i;
    function mousemove() {
      i++;
      box.innerHTML = i;
    }
    function throttle(fn, t) {
      let timer = null;
      return function () {
        if (!timer) {
          timer = setTimeout(function () {
            mousemove();
            //清空定时器 不用clearTimeout 因为定时器仍在工作,无法通过此方法进行清除
            timer = null;
          }, 500)
        }
      }
    }
    box.addEventListener('mousemove', throttle(mousemove, 500));

节流综合案例

视频播放时,通过节流每秒记录一次数据到本地存储,刷新页面后,将本地存储的播放时间位置赋给视频的当前时间的属性(要考虑第一次刷新页面时,没有数据在本地存储中)

 const video = document.querySelector('video');
    video.ontimeupdate = _.throttle(function () {
      localStorage.setItem('currentTime', video.currentTime);
    }, 1000)
    video.onloadeddata = function () {
      video.currentTime = localStorage.getItem('currentTime') || 0; //逻辑中断,若前面为真,则后面的0赋值不会执行
    }

标签:box,function,防抖,const,进阶,--,obj,console,log
From: https://blog.csdn.net/wozhaonue_w/article/details/142928267

相关文章

  • OpenCV高级图形用户界面(11)检查是否有键盘事件发生而不阻塞当前线程函数pollKey()的
    操作系统:ubuntu22.04OpenCV版本:OpenCV4.9IDE:VisualStudioCode编程语言:C++11算法描述轮询已按下的键。函数pollKey无等待地轮询键盘事件。它返回已按下的键的代码或如果没有键自上次调用以来被按下则返回-1。若要等待按键被按下,请使用waitKey。注意waitKey......
  • OpenCV高级图形用户界面(8)在指定的窗口中显示一幅图像函数imshow()的使用
    操作系统:ubuntu22.04OpenCV版本:OpenCV4.9IDE:VisualStudioCode编程语言:C++11算法描述在指定的窗口中显示一幅图像。函数imshow在指定的窗口中显示一幅图像。如果窗口是以cv::WINDOW_AUTOSIZE标志创建的,图像将以原始大小显示,不过仍然受限于屏幕分辨率。否则,图像......
  • OpenCV高级图形用户界面(9)更改指定窗口的位置函数moveWindow()的使用
    操作系统:ubuntu22.04OpenCV版本:OpenCV4.9IDE:VisualStudioCode编程语言:C++11算法描述将窗口移动到指定的位置。cv::moveWindow()函数用于更改指定窗口的位置。你可以使用这个函数来移动窗口到屏幕上的任何位置。函数原型voidcv::moveWindow ( constString......
  • 基于LSTM-Transformer混合模型实现股票价格多变量时序预测(PyTorch版)
    前言系列专栏:【深度学习:算法项目实战】✨︎涉及医疗健康、财经金融、商业零售、食品饮料、运动健身、交通运输、环境科学、社交媒体以及文本和图像处理等诸多领域,讨论了各种复杂的深度神经网络思想,如卷积神经网络、循环神经网络、生成对抗网络、门控循环单元、长短期记忆......
  • KDD24 推荐系统 论文整理 自用
    由于笔者是个笨比不会查重,因此难免有纰漏错误,望各位海涵。具体检索为在kdd24论文中检索“recommen”关键词。(另外大家使用富文本编辑器千万别按ctrl+z,可能直接返回上一次保存草稿的时机!!!让俺多花了半个点!)目录Research Track Papers(55 papers)Applied Data Papers(25 p......
  • 智能EDA小白从0开始 —— DAY22 PyAether深度解析与技术展望
    引言:技术革新与行业需求的碰撞在半导体行业快速发展的今天,芯片设计的复杂性和对效率的要求日益提升。传统的芯片设计工具和方法已经难以满足当前行业的需求,特别是在面对大规模、高性能芯片的设计时,设计师们面临着前所未有的挑战。正是在这样的背景下,华大九天推出了基于Python......
  • 探索桂林:使用SpringBoot构建的旅游平台
    1系统概述1.1研究背景随着计算机技术的发展以及计算机网络的逐渐普及,互联网成为人们查找信息的重要场所,二十一世纪是信息的时代,所以信息的管理显得特别重要。因此,使用计算机来管理桂林旅游景点导游平台的相关信息成为必然。开发合适的桂林旅游景点导游平台,可以方便管理人......
  • 上百种【基于YOLOv8/v10/v11的目标检测系统】目录(python+pyside6界面+系统源码+可训练
    待更新(持续更新),早关注,不迷路...............................................................................目标检测系统操作说明【用户使用指南】(python+pyside6界面+系统源码+可训练的数据集+也完成的训练模型)基于YOLOv8的车辆行人实时检测系统基于YOLOv10的车辆行人......
  • RHCE的学习(1)
    一、Linux的例行性工作场景:生活中,我们有太多场景需要使用到闹钟,比如早上7点起床,下午4点开会,晚上8点购物,等等。在Linux系统里,我们同样也有类似的需求。比如我们想在凌晨1点将文件上传服务器,或者在晚上10点确认系统状态,等等。但我们不可能一直守在电脑前,毕竟......
  • 秦淮八艳秀书画
    秦淮八艳秀书画雷家林        秦淮八艳:顾横波、董小宛、卞玉京、李香君、寇白门、马湘兰、柳如是、陈园园此八名妓,合于中国古代的妓的含义,多数卖艺不卖身,所以琴棋书画样样精通,也是她们的职业需要,但她们书画留下的不多,无法作出清晰的断明,只能用一个秀字来翻一翻......