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防抖和节流
今天在网上看到的,里面的内容非常多.说下我自己的理解. 所谓的防抖就是利用延时器来使你的最后一次操作执行.而节流是利用时间差的办法,每一段时间执行一次.下面是我的代码: 这段代码是右侧的小滑块跟随页面 ...
随机推荐
- istio in kubernetes (一) --原理篇
背景 微服务是什么 • 服务之间有轻量级的通讯机制,通常为REST API • 去中心化的管理机制 • 每个服务可以使用不同的编程语言实现,使用不同的数据存储技术 • 应用按业务拆分成服务,一个大型应 ...
- C# 9.0新特性详解系列之一：只初始化设置器（init only setter)
1.背景与动机 自C#1.0版本以来,我们要定义一个不可变数据类型的基本做法就是:先声明字段为readonly,再声明只包含get访问器的属性.例子如下: struct Point { public ...
- 图解HTTP简单笔记【上】
第一章 了解WEB及网络基础(省略了TCP/IP的知识点) 1.1.使用HTTP协议访问web 当我们在主机的浏览器的地址输入URL之后 请求将回发送至目标服务器 目标服务器在接受到响应请求时将会响 ...
- Android sensor架构分析
一.其主要框架如下图所示: 二.sensor的JNI层:android_hardware_SensorManager.cpp (frameworks\base\core\jni) 注册JN ...
- Lambda表达式（一）入门认识篇
Lambda表达式(一)入门认识篇 Lambda简介 Lambda 表达式是 JDK8 的一个新特性,可以取代大部分的匿名内部类,写出更优雅的 Java 代码,尤其在集合的遍历和其他集合操作中,可以极 ...
- 我是如何使计算提速>150倍的
我是如何使计算提速>150倍的 我的原始文档:https://www.yuque.com/lart/blog/lwgt38 书接上文<我是如何使计算时间提速25.6倍>. 上篇文章提 ...
- python办公入门7：xlwt
xlwt写入excel步骤 创建工作簿 创建工作表 填充工作表内容 保存文件 1 import xlwt 2 3 #创建工作簿 4 wb=xlwt.Workbook() 5 #创建工作表 6 ws=w ...
- python：列表的去重：两种方法的问题是：结果是没有保持原来的顺序。
列表的去重 1.使用set的特型,python的set和其他语言类似, 是一个无序不重复元素集 orgList = [1,0,3,7,7,5] #list()方法是把字符串str或元组转成数组 for ...
- 如何在word中插入代码
本文使用的是word2007,在网上查阅资料,可以使用如下方法: 1. 插入一个1行1列的表格,然后将代码写在里面,完成之后选中表格: 2. 将样式改为"HTML代码". 其实只是 ...
- MacBook键盘锁定、按键失效、无反应等问题
目录 MacBook按键无反应 u,i,o,j,k,l等键失灵 capslock灯不亮 原文链接:joselynzhao·CSDN·MacBook键盘锁定.按键失效.无反应等问题 MacBook按键无 ...