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防抖和节流
今天在网上看到的,里面的内容非常多.说下我自己的理解. 所谓的防抖就是利用延时器来使你的最后一次操作执行.而节流是利用时间差的办法,每一段时间执行一次.下面是我的代码: 这段代码是右侧的小滑块跟随页面 ...
随机推荐
- SQL Server 批量生成数据库内多个表的表结构
在遇到大型数据库的时候,一个数据库内存在大量的数据表,如果要生成多个表的表结构,一个表的检索,然后右键Create出来,太麻烦了. 下面我介绍下批量选择并生成多个表的表结构快捷方式,仅供参考. 第一步 ...
- 即时编译器 (JIT) 详解
最近听我的导师他们讨论Java的即时编译器(JIT),当时并不知道这是啥东西,所以就借着周末的时间,学习了一下! 一.概述 在部分的商用虚拟机(Sun HotSpot)中,Java程序最初是通过解释器 ...
- PHP 使用gd库给图片加图片水印，文字水印，并返回路径
//图片水印 $mark_filename = './02.jpg'; //获取图片信息 $info = getimagesize($mark_filename); //获取图片的后缀 $type = ...
- MQ消息中间件，面试能问些什么？
MQ消息中间件,面试能问些什么? 为什么使用消息队列?消息队列的优点和缺点? kafka.activemq.rabbitmq.rocketmq都有什么优缺点? 面试官角度分析: (1)你知不知道你们系 ...
- Wine和CrossOver之间的关系简单介绍
相信有些小伙伴们不太了解Wine和CrossOver之间的关系与区别,然而对此又很好奇,所以小编今天将给大家介绍一下这两者之间的关系与区别. Wine是什么? Windows.Linux和macOS是 ...
- 在FL Studio中制作和优化人声和弦（Vocal Chords）
人声和弦在Future Bass.Melodic Dubstep等类型的电子音乐中被常用.与一般的和弦相同,其主要起到为主旋律做铺垫的效果,但是人声和弦加入了人声的因素,可以使得和弦更有趣,更有电子音 ...
- 统一软件开发过程(RUP)的概念和方法
统一软件开发过程(Rational Unified Process,RUP)是一种面向对象且基于网络的程序开发方法论. 根据Rational(Rational Rose和统一建模语言的开发者)的说法, ...
- 学习netty遇到的关于 LineBasedFrameDecoder 的问题
最近在看<Netty权威指南>这本书,关于TCP粘包/拆包,书中使用的是 LineBasedFrameDecoder 来解决的,但是我在实践的过程中出现了问题,上代码吧. 这个是 serv ...
- yii2.0 访问控制器下的方法时出现 Object Not Found! 解决办法
yii2.0 访问控制器下的方法时出现 Object Not Found! 时 可以查看(apache) 入口文件index.php 的同级有没有 .htaccess 文件 没有.htaccess ...
- Linux 设置静态路由表
一般来说多半不会使用到这个操作,但是最近有几台服务器需要多网卡,一个内网一个外网.导致网络访问内网有时候不通,这就需要我们手动写一下路由表了.操作如: 创建配置文件 网卡配置路径:/etc/sysco ...