首页 > 其他分享 >一道笔试题:利用JS代码实现防抖和节流

一道笔试题:利用JS代码实现防抖和节流

时间:2024-08-23 21:14:49浏览次数:6  
标签:function 防抖 const 节流 args JS context

防抖 (Debounce)

防抖的目的是在一系列连续的调用中,只有在最后一次调用后的一段时间内没有新的调用才会执行该函数。这对于一些需要在用户停止操作后才执行的场景非常有用,比如输入框的搜索建议。

function debounce(func, wait) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(function() {
      func.apply(context, args);
    }, wait);
  };
}

 

节流 (Throttle)

节流的目的是保证一个函数在一定时间内只被调用一次。这可以确保函数不会因为高频触发而消耗过多资源。例如,当用户滚动页面时,我们可能只想每隔一段时间才更新数据。

function throttle(func, limit) {
  let inThrottle;
  return function() {
    const args = arguments;
    const context = this;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(function() {
        inThrottle = false;
      }, limit);
    }
  };
}

 

// 使用防抖
const debouncedFunction = debounce(function() {
  console.log('This will be logged after 500ms of silence.');
}, 500);

window.addEventListener('resize', debouncedFunction);

// 使用节流
const throttledFunction = throttle(function() {
  console.log('This will be logged at most once every second.');
}, 1000);

window.addEventListener('scroll', throttledFunction);

像这种基本的而且常用的知识还是挺容易考的

标签:function,防抖,const,节流,args,JS,context
From: https://www.cnblogs.com/zx618/p/18377100

相关文章

  • 织梦文章页中怎么用js控制图片的大小
    在织梦CMS的文章页中使用JavaScript来控制图片的大小,可以通过以下几种方法实现:方法一:使用纯JavaScript获取图片元素:使用 document.getElementById 或 document.querySelector 来获取页面上的图片元素。设置图片大小:通过修改图片元素的 style.width 和 style.he......
  • C# Json格式化换行输出
    publicstaticstringJsonBeauty(thisstringinput,boolarrayWrap=false,stringindents=""){voidAppendIndent(StringBuildersb,intcount,stringindents){for(;count>0;--count)sb.Append(indents);}varoutput=newSt......
  • JS WEB 实现文件夹上传(保留目录结构)
    最近这块好像挻火的,今天早上又有一位网友加我微信,也是想了解这块的技术和方案,实际上我的微信之前就已经在网上公开了,但是论坛里面很多网友还是不知道。昨天晚上论坛里面有一个网友发私信给我,想和我探讨一下这方面的技术问题,他是刚开始接触这块,以前没怎么接触过,都是做的后端......
  • 一文搞定—FastJson详解 与 使用
    FastJson详解与使用1.Fastjson的主要功能2.快速开始2.1对象与JSON字符串的转换2.2List与JSON字符串的转换3.注解支持4.JSONPath查询5.性能与安全6.版本与兼容性7.常用方法7.1JSON.toJSONString(Objectobject)7.2JSON.parseObject(Stringtext,......
  • 8.17js
    1、使用html写一个网页,要求满足以下条件:(1)网页中含有任意一张图片,图片路径使用绝对路径,鼠标悬停在图片时出现“马哥教育”文本,且点击图片可跳转至马哥教育官方页面(2)网页中包含账号、密码登录,且账号提前定义好是admin且不可更改,输入密码时显示加密形式<!DOCTYPEhtml><htmlla......
  • JSP基于SSM框架的高校网络教学平台0qyf5(程序+源码+数据库+调试部署+开发环境)
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表系统功能:教师,学生,课程资料,资料分类,作业信息,作业提交,作业批改,课程信息,选课信息,课程签到技术要求:开发语言:JSP前端使用:HTML5,CSS,JSP动态网页技术后端......
  • JSP基于SSM框架的服装租赁系统606b8程序+源码+数据库+调试部署+开发环境
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表系统功能:用户,采购员,清洁员,服装类型,服装信息,服装租赁,采购入库,服装报废,服装归还,清洁分配,清洁服装,通知公告技术要求:开发语言:JSP前端使用:HTML5,CSS,JS......
  • JSP基于SSM的校园音乐平台vnzr8(程序+源码+数据库+调试部署+开发环境)
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表系统功能:用户,校园歌手,明星歌手,歌曲类别,校园歌曲,歌曲mv,歌手歌曲开题报告内容一、课题背景与意义随着互联网技术的快速发展,网络音乐平台已成为人们日常生......
  • JSP基于ssm的校园社团管理系统7wp38程序+源码+数据库+调试部署+开发环境
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表系统功能:用户,医生,医院类型,社区医院,接种疫苗,疫苗类型,预约信息开题报告内容一、项目背景与意义随着高等教育的快速发展,校园社团作为学生第二课堂的重要组......
  • uniapp+uView纯js手写加搜索的多选框
    父组件代码:<template>  <view>    <viewv-for="(item,index)instockList":key="index">      <viewclass="s-title">{{item.typeName}}</view>      <viewclass="s-list"......