javascript中的防抖与节流函数

1、什么是函数防抖

定义：限制一个函数在一定时间内只能执行一次。

举个例子：王者荣耀里面当英雄要回城的时候，需要8s时间才能完成回城的动作，但如果在这段时间期间受到伤害就会打断回城，重新回城又得从8时开始。

实例代码：

    <script>// 给盒子注册 鼠标移动事件document.querySelector('div').addEventListener('mousemove', throttle(mousemove, 2000))// 计数器let i = 0function mousemove() {i++document.querySelector('div').innerHTML = i}//利用延时函数实现防抖function throttle(fn,time){let timerconsole.log(1);return function(){clearTimeout(timer)timer = setTimeout(()=>{fn()},time)}}</script>

2、什么是函数节流

概念：函数防抖（debounce），防抖触发高频率事件时n秒后只会执行一次，如果n秒内再次触发，则会重新计算。

举个例子：坐电梯的时候，如果电梯检测到有人进来（触发事件），就会多等待 10 秒，此时如果又有人进来（10秒之内重复触发事件），那么电梯就会再多等待 10 秒。

实例代码：

<script>// 给盒子注册 鼠标移动事件document.querySelector('div').addEventListener('mousemove', throttle(mousemove, 2000))// 计数器let i = 0function mousemove() {i++document.querySelector('div').innerHTML = i}// 利用时间戳实现 函数节流function render(fn,time){let times = +new Date()return function(){let timee = +new Date()if(timee-times>time){fn()times=timee}}}
</script>

javascript中的防抖与节流函数相关推荐

vue中的防抖和节流
vue中的防抖和节流防抖:触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间. 使用场景:频繁触发.输入框搜索因为防抖的特性,一直执行最后一次的触发,所以可以用于鼠 ...
输入防抖 vue # 输入搜索的时候及时搜索的快速访问接口的解决方案 vue 中使用防抖和节流
输入防抖 vue # 输入搜索的时候及时搜索的快速访问接口的解决方案 vue 中使用防抖和节流参考文章: (1)输入防抖 vue # 输入搜索的时候及时搜索的快速访问接口的解决方案 vue ...
JavaScript中的String（）函数与示例
String()函数 (String() function) String() function is a predefined global function in JavaScript, it i ...
JavaScript中常见的字符串操作函数及用法汇总
转载地址:http://www.jb51.net/article/65358.htm 这篇文章主要介绍了JavaScript中常见的字符串操作函数及用法,实例汇总了javascript常见的字符串转换 ...
一篇文章把你带入到JavaScript中的闭包与高级函数
在JavaScript中,函数是一等公民.JavaScript是一门面向对象的编程语言,但是同时也有很多函数式编程的特性,如Lambda表达式,闭包,高阶函数等,函数式编程时一种编程范式. funct ...
前端中unescape是什么意思_详解JavaScript中的Unescape()和String() 函数
JavaScript中的Unescape()和String() 函数详解,具体内容如下所示: 定义和用法 JavaScript unescape() 函数可对通过 escape() 编码的字符串进行解 ...
全网最详细JavaScript防抖、节流函数解析
防抖与节流防抖与节流防抖作用与简介实现核心与细节应用场景节流作用与简介实现核心与细节应用场景防抖与节流防抖作用与简介在一个周期T内,如果重复的进行某种响应操作,在不设置防 ...
apply、call、bind三者的区别—附：防抖、节流函数
apply.call.bind三者的区别相同点 1.1 三者都能改变函数中的this指向 1.2 第一个参数都是是要改变的this指向的对象不同点 2.1.第二个参数:apply传的是参数数组:c ...
在javaScript中，变量名和函数名不能重名
直接上代码和截图在javaScript中,变量的名字和函数的名字不能取一样的名字(即变量名和函数名不能重名) <script type="text/javascript"& ...

javascript中的防抖与节流函数

javascript中的防抖与节流函数相关推荐

最新文章

热门文章