JavaScript：防抖与节流
①防抖：
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
height: 2200px;
background-color: pink;
}
</style>
</head> <body>
<div>我是内容部分</div>
<script type="text/javascript">
//防抖：函数只执行最后一次，若时间间隔小于500毫秒，则函数不执行
window.onscroll = debounce(function () {
console.log("调用了1次");
}, 500) function debounce(func, delay = 300) {
var timer
return function () {
var that=this
var args=arguments
clearTimeout(timer)
timer = setTimeout(function(){
func.apply(that,args) //改变定时器中的this指向
},delay)
}
}
</script>
</body> </html>
②节流：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head> <body>
<button>点击</button>
<script>
//节流：函数在一定的时间里只能执行那么几次，点击后等500毫秒触发，只能500毫秒触发一次
var btn = document.getElementsByTagName('button')[0]
btn.onclick = throttle(function () {
console.log(111);
}, 500) function throttle(func, wait) {
var timer
return function () {
var that = this
var args = arguments
if (!timer) {
timer = setTimeout(function () {
timer = null
func.apply(that, args) //改变定时器中的this指向
}, wait)
}
}
}
</script>
</body> </html>
JavaScript：防抖与节流的更多相关文章
- JavaScript 防抖和节流
1. 概述 1.1 说明 在项目过程中,经常会遇到一个按钮被多次点击并且多次调用对应处理函数的问题,而往往我们只需去调用一次处理函数即可.有时也会遇到需要在某一规则内有规律的去触发对应的处理函数,所以 ...
- 来聊聊JavaScript中的防抖和节流
目录 JavaScript防抖和节流 问题还原 防抖 什么是防抖 使用场景 节流 什么是节流 使用场景 JavaScript防抖和节流 问题还原 我们先来通过代码把常见的问题还原: <html& ...
- 原生JavaScript实现函数的防抖和节流
原生JavaScript实现函数的防抖和节流 参考:https://www.jianshu.com/p/c8b86b09daf0 想详细了解的直接戳上面链接了,讲得非常清楚.下面只给代码和我自己写的注 ...
- 彻底搞懂JavaScript的闭包、防抖跟节流
最近出去面试了一下,收获颇多!!! 以前的我,追求实际,比较追求实用价值,然而最近面试,传说中的面试造火箭,工作拧螺丝,竟然被我遇到了.虽然很多知识点在实际工作中并不经常用到,但人家就是靠这个来筛选人 ...
- JavaScript 中的防抖和节流
什么是防抖 函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时.如下图,持续触发 scrol ...
- javascript之防抖与节流
防抖 你是否在日常开发中遇到一个问题,在滚动事件中需要做个复杂计算或者实现一个按钮的防二次点击操作. 这些需求都可以通过函数防抖动来实现.尤其是第一个需求,如果在频繁的事件回调中做复杂计算,很有可能导 ...
- JavaScript中函数防抖、节流
码文不易,转载请带上本文链接,感谢~ https://www.cnblogs.com/echoyya/p/14565642.html 目录 码文不易,转载请带上本文链接,感谢~ https://www ...
- js高阶函数应用—函数防抖和节流
高阶函数指的是至少满足下列两个条件之一的函数: 1. 函数可以作为参数被传递:2.函数可以作为返回值输出: javaScript中的函数显然具备高级函数的特征,这使得函数运用更灵活,作为学习js必定会 ...
- js防抖和节流
今天在网上看到的,里面的内容非常多.说下我自己的理解. 所谓的防抖就是利用延时器来使你的最后一次操作执行.而节流是利用时间差的办法,每一段时间执行一次.下面是我的代码: 这段代码是右侧的小滑块跟随页面 ...
随机推荐
- ntpd配置时间同步服务器
修改同步服务器的配置文件/etc/ntp.conf ,删除所有的内容,添加 restrict default nomodify server 127.127.1.0 # local clock fud ...
- Linux_CentOS 7下Nginx服务器的安装配置
1.安装 1.1 配置epel yum 源 wget http://dl.Fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm rpm ...
- 放弃腾讯75W年薪，回老家当公务员，提离职被领导教育。网友：leader嫉妒了
最近一位腾讯员工自爆,"老家公务员政审已过,放弃腾讯75w年薪,提了离职被leader教育了".并且这位员工还晒出了领导"教育"自己的聊天记录,引发网友们的热议 ...
- NUC972当检测到sd卡时，在sd卡驱动中操作gpio开启sd卡的电源，解决sd卡因低电压有时识别不正常的问题
1.根据硬件原理图,找到对应控制sd卡电源的gpio引脚,并在sd卡驱动文件中定义操作改该引脚的宏 2.在sd卡检测函数中,使用glib增加开sd卡电源的操作,如此当sd卡每次被检测到时,驱动中就会自 ...
- webug第十五关:什么？图片上传不了？
第十五关:什么?图片上传不了? 直接上传php一句话失败,将content type改为图片 成功
- nginx的403权限问题
修改访问目录的权限为755 找到Nginx的配置文件nginx.conf,做如下改变: (1)将user nobody; 改为user root; (2)找到 autoindex off 更改为on ...
- gcc和g++理解
环境使用的编译器版本是是gcc (GCC) 4.8.5 20150623 (Red Hat 4.8.5-39) 编译使用了c++11标准的程序时不能通过. 先放解决方法:g++ -std=c++11 ...
- Mac如何像Windows一样在文件系统中查看文件?
许多Windows系统用户刚转向Mac的时候,肯定非常不适应Mac系统独特的文件系统,就像安卓转iOS系统一样,那么Mac电脑如何像Windows系统一样,能够查看电脑上的各个盘,如C盘D盘等等,然后 ...
- Mac 上超好用的代码对比工具 beyond compare，对比json差异
导读 昨天下午,公司业务跑不通,然后开发组长让架构师联系我,给我发一个json和部署到dev上的微服务url,让我去测试下,将发来的json放到json.cn上愣是解析不出来,我就用之前的json请求 ...
- mfc 位图本地存储 本地位图读取显示
一.读取CImage //在绘图函数中直接使用参数pDC,无需定义 CDC* pDC = GetDC(): //读去位图路径,根据实际情况修改 CString loatImagePath = TEXT ...