js防抖和节流 区别及实现方式,js函数防抖和函数节流,JS中的防抖与节流及作用详解

js防抖和节流 区别及实现方式,js函数防抖和函数节流,JS中的防抖与节流及作用详解

本文主要介绍JS中的防抖和节流,并详细说明其功能。本文以文字描述和示例代码的形式给大家做了非常详细的介绍,有一定的参考价值。有需要的朋友可以参考一下。

概念

功能防抖(debounce)是指在一定时间内,当动作被连续频繁触发时,动作只会被执行一次,也就是说,当动作被调用n毫秒后,如果在n毫秒内再次调用该动作,执行时间将重新计算,因此短时间内的连续动作将永远只被触发一次。例如,如果你用手指按住一个弹簧,它不会反弹,直到你松手。

函数节流是指在一定时间内执行的操作只执行一次,也就是说预先设定一个执行周期,当调用动作的时刻大于等于执行周期时,执行动作,然后进入下一个新的周期。一个生动的例子是,如果拧紧水龙头,直到水以水滴的形式流出,你会发现每隔一段时间,就会有一滴水流出。

节流函数和去抖函数都是为了限制函数的执行频率,使得优化函数触发频率过高导致的响应速度跟不上触发频率,导致延迟、假死或停滞。

通过下面的示例代码来看看防抖和节流。

什么是防抖?什么是节流?让我们一起愉快地学习吧。

首先,什么是防抖:即事件在一定时间内只发生一次。比如你点按钮,你单身30年,1秒钟点无数次,他还是只会触发一次。比如你在页面中使用onkeyUp来监听用户在输入框中的输入,如果用户按住了一个6,那么监听事件不是一直被触发,浪费了一部分性能吗?然后我们在某个事件内进行监控,这意味着我会在一秒钟后看到你输入了多少个6,这样就简单多了。好了,解释清楚了,我们来看一下代码,让它更清楚。

!文档类型html

超文本标记语言

meta charset='UTF-8 '

标题防抖/标题

/头

身体

按钮id='去抖'防抖,防抖,防抖/按钮

脚本

window.onload=function () {

let obtn=document . getelementbyid('去抖');//获取按钮

obtn.addEventListener('click ',debounceHandle(debounce),false);//侦听绑定事件

}

//防抖功能

函数去抖句柄(fn) {

设timer=null

返回函数(){

clearTimeout(定时器);//如果有事件,则清除计时器

Timer=setTimeout(function(){ //如果不存在,启动定时器。

fn.call(this,arguments);

},300)

}

}

//执行函数

函数去抖(){

Console.log('防抖,防抖,防抖');

}

/脚本

/body

/html

上述函数在300毫秒内只会触发一个事件。总结:防抖是指当任务频繁触发时,只有当任务触发的间隔超过指定的间隔时,才会执行任务。

接下来节流是什么?如果一个页面中有任意数量的图片,那么可以使用延迟加载技术。惰性加载意味着监视滚动条的位置。如果用户一直滚动,那么事件监控总是会被触发,这也是对性能的浪费。那么节流就是在一定的时间间隔内触发一个事件。话不多说,先看代码。

!文档类型html

超文本标记语言

meta charset='UTF-8 '

标题限制/标题

风格

部门{

高度:5000px

}

/风格

/头

身体

分度,节流,节流/分度

脚本

window.onload=function () {

window . addevent listener(' scroll ',throttleHandle(throttle),false);//侦听绑定事件

}

//节流功能

函数throttleHandle (fn) {

设定时器=空,

booleanVal=true//声明一个变量标志进行判断

返回函数(){

如果(!booleanVal) {

返回

}//如果事件正在执行,则返回并将布尔值更改为false

booleanVal=false

//不执行该事件。创建事件。

timer=setTimeout(function() {

fn.apply(this,arguments);

booleanVal=true//在事件执行后将布尔值改回

},300)

}

}

//执行函数

功能节流(){

var scroll num=document . document element . scroll top | | document . body . scroll top;

console . log(scroll num);

}

/脚本

/body

/html

这样在一些特定的工作场景下,就可以利用防抖和节流来减少不必要的损失。最后一个问题,最后一句提到了不必要的损失,那么是什么损失呢?

总结

以上是边肖介绍的JS中防抖节流的详细说明。希望对你有帮助。如果您有任何问题,请给我留言,边肖将及时回复您。非常感谢您对我们网站的支持!

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: