首页 > 其他分享 >手写防抖节流

手写防抖节流

时间:2024-04-04 21:00:44浏览次数:23  
标签:防抖 节流 函数 timer param 手写 执行 fn wait

防抖

持续频繁触发某个机制,则需要等待指定的时间再执行。

/** 手写防抖
 * 用法:函数在 n 秒后再执行,如果 n 秒内被触发,重新计时,保证最后一次触发事件 n 秒后才执行。
 * 思路:
 *  1、保存一个变量 timer
 *  2、返回一个闭包函数 函数内判断一下 timer 是否有值
 *    2.1、如果有值 说明 定时器已经开启 需要将定时器清空
 *  3、设置定时器 等待 wait 后执行 将定时器赋值给 timer 记录
 *  4、通过 apply 执行函数 传入 arguments
 * @param {*} fn
 * @param {*} wait
 * @param {boolean} [immediate=false]
 * @return {*}
 */

function debounce(fn, wait, immediate) {
  let timer = null;
  return function (...args) {
    if (immediate && !timer) fn.apply(this, ...args);

    if (timer) {
      clearTimeout(timer);
      timer = null;
    }

    timer = setTimeout(() => {
      clearTimeout(timer);
      timer = null;
      fn.apply(this, ...args);
    }, wait);
  };
}

节流

持续频繁触发某个机制,则需要保持特定时间内只执行一次。

/** 手写节流
 * 用法:函数在 n 秒内只执行一次,如果多次触发,则忽略执行。
 * 思路:
 *  1、记录函数上一次执行的时间戳 startTime
 *  2、返回一个闭包函数 当被调用时会记录一下执行时间 nowTime
 *  3、比较两次执行时间间隔 是否超过了 wait 时间
 *  4、如果是大于 wait 时间 说明已经过了一个 wait 时间 可以执行函数
 *    4.1、更新 startTime 方便下次对比
 *    4.2、通过 apply 执行函数fn 传入 arguments 参数
 *  5、如果没有超过 wait 时间  说明是在 wait 时间内又执行了一次  忽略
 * @param {Function} fn 执行函数
 * @param {Number} wait 等待时间
 * @return {*}
 */

function throttle(fn, wait) {
  let startTime = Date.now();
  return function (...args) {
    const nowTime = Date.now();
    if (nowTime - startTime >= wait) {
      startTime = nowTime;
      return fn.apply(this, [...args]);
    }
  }
 }

标签:防抖,节流,函数,timer,param,手写,执行,fn,wait
From: https://www.cnblogs.com/qingzhao/p/18114594

相关文章

  • javascript常见100问|前端基础知识|问ajax-fetch-axios-区别请用 XMLHttpRequestfetch
    00-开始前端基础知识HTMLCSSJSHTTP等基础知识是前端面试的第一步,基础知识不过关将直接被拒。本章将通过多个面试题,讲解前端常考的基础知识面试题,同时复习一些重要的知识点。为何要考察扎实的前端基础知识,是作为前端工程师的根本。基础知识能保证最基本的使用,即招聘......
  • vue3 手机端 手写签字
    <template><div><div><canvasclass="canvas"id="canvas"ref="canvas"></canvas><canvasid="blank"style="display:none"></canvas><p......
  • 手写数字图片识别——DL 入门案例
    DeepLearningDemoofPrimary下面介绍一个入门案例,如何使用TensorFlow和Keras构建一个CNN模型进行手写数字识别,以及如何使用该模型对自己的图像进行预测。尽管这是一个相对简单的任务,但它涵盖了深度学习基本流程,包括:数据准备模型构建模型训练模型预测输入:importtenso......
  • 手写简易操作系统(二十)--实现堆内存管理
    前情提要前面我们实现了0x80中断,并实现了两个中断调用,getpid和write,其中write还由于没有实现文件系统,是个残血版,这一节我们实现堆内存管理。一、arena在计算机科学中,“arena”内存管理通常指的是一种内存分配和管理技术,它通常用于动态内存分配和释放。在这种管理......
  • 使用支持向量机算法解决手写体识别问题
    文章目录支持向量机导入图片测试算法fromgoogle.colabimportdrivedrive.mount("/content/drive")Drivealreadymountedat/content/drive;toattempttoforciblyremount,calldrive.mount("/content/drive",force_remount=True).支持向量机fromnumpy......
  • 小程序 — 手写签字版封装
    <viewclass="electronicSignature"><!--<viewclass="handTitle">手写板</view>--><viewclass="handCanvas"><canvasclass="writingwrapper"disable-scroll=&qu......
  • 字节流和字符流综合练习
    字节流和字符流的使用场景字节流:拷贝任意类型的文件字符流:读取纯文本文件的数据;往纯文本文件中写出数据练习1:拷贝需求:拷贝一个文件夹,考虑子文件夹packagea03test;importjava.io.File;importjava.io.FileInputStream;importjava.io.FileOutputStream;importjava.......
  • react防抖节流
    防抖importReact,{useState,useEffect}from'react';constDebounceExample=()=>{const[inputValue,setInputValue]=useState('');useEffect(()=>{constdelay=1000;//设置防抖延迟时间为1秒consttimer=setTimeou......
  • 前端面试手写题目|编写一个函数,实现对象深拷贝,递归引用,日期,正则symbol健。手写Object.
    快速,选择,希尔45,编写一个函数,实现对象深拷贝,并解决递归引用,日期,正则表达式,对象中含有symbol健等问题。functiondeepCopy(obj,cache=newWeakMap()){if(obj==null||typeofobj!=='object'){r......
  • 手写SpringBoot(一)之简易版SpringBoot
    系列文章目录手写SpringBoot(一)之简易版SpringBoot手写SpringBoot(二)之动态切换Servlet容器手写SpringBoot(三)之自动配置手写SpringBoot(一)之简易版SpringBoot添加依赖<?xmlversion="1.0"encoding="UTF-8"?><projectxmlns="http://maven.apache.org/POM/4.0.0"......