码迷,mamicode.com
首页 > 其他好文 > 详细

函数防抖、函数节流

时间:2020-11-13 12:09:33      阅读:8      评论:0      收藏:0      [点我收藏+]

标签:一个   时间间隔   UNC   col   timer   清除   rgba   点击   执行函数   

函数节流是减少函数的触发频率,而函数防抖则是延迟函数执行,并且不管触发多少次都只执行最后一次。

函数防抖(debounce):防止重复触发

  延迟函数执行。不管debounce函数出发了多久,只在最后一次处罚debounce函数时,才定义setTimeout,到达时间间隔再执行需要防抖的函数

 用处: 多用于input框输入时,显示匹配的输入内容情况

函数防抖的说明:

  1、第一次触发函数时,定义了一个定时器。在n秒后执行

  2、然后函数第二次触发的时候,由于闭包的特性,这时候的timer已经是第一次触发时的定时器的标识了。然后直接清除第一次的setTtimout,这时候第一次的setTimeout里面的内容就不会执行了。然后再定义第二次的setTimeout。

  3、然后重复第二个步骤,一直清除,又一直设置。直到函数最后一次触发,定义了最后的一个定时器,并且间隔 n秒 执行。

  4、如果在 最后一个定时器没执行时,函数又触发了,那么又重复第三步。相当于 设置的间隔时间,只是延迟函数执行的时间,而不是间隔多少秒再执行。

函数节流(throttle):节约触发的频率

  单位时间n秒内,第一次触发函数并执行,以后n秒内不管处罚多少次,都不执行。直到下个单位时间n秒,第一次触发函数并执行,这个n秒内不管函数多少次都

  不执行

用处 :多用于页面scroll滚动,或者窗口resize, 或者防止按钮重复点击等情况

函数节流的说明:

  1、第一次执行时,是一定能执行函数的

  2、然后n秒内第二次触发的时候,当第一次与第二次间隔不足设置的间隔时间时,就不会执行。之后第三、第四次触发还是不执行

  3、直到n秒后,有且仅有一次,并且是第一次再次触发函数

 

函数防抖、函数节流

标签:一个   时间间隔   UNC   col   timer   清除   rgba   点击   执行函数   

原文地址:https://www.cnblogs.com/xiaoqian227/p/13913694.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!