摘要:函数的节流当持续触发事件时,保证一定时间段内只调用一次事件处理函数。也就是一个函数执行一次后,只有大于设定的执行周期后才会执行第二次。记忆法让函数执行者冷静下来后不一直抖动后,才真正执行。
1.函数的节流
当持续触发事件时,保证一定时间段内只调用一次事件处理函数。也就是一个函数执行一次后,只有大于设定的执行周期后才会执行第二次。
记忆法:联系到水流的流量,我想让你1s只流出多少水你就只能流多少水,多的水流只能等到下个周期才能流出。
应用场景:如用户不断滑动滚轮,规定1s只能真正下滑一次,你滑再多也没用,只能等到下个周期你再滑才有用。
实现原理:
A:用函数的闭包来锁住上一执行的时间,在用这一次执行的时间相比,大于设定的间隔时间则执行
B:也可以直接把lasTime放到全局去,不用闭包但这样就不好在事件监听的时候传递参数delay只能写死
这里我节流用闭包写,防抖就不用闭包了
用闭包就有一个问题,this的指向会非常复杂:
1.throttle函数的执行环境具有全局性,内部this通常是指向window的,然后返回一个匿名函数。
2.返回的匿名函数绑定了事件,this指向监听的元素(document)
3.fn其实与上面返回匿名函数形成了闭包,且fn也其实是一个匿名函数,匿名函数的执行具有全局性,fn内部this应该指向window
4这里用apply修正this指向,使fn内部的this重新指向document
当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时,比如频繁触发的某一函数,防抖可以只让最后一次执行。记忆法:让函数执行者冷静下来后(不一直抖动后),才真正执行。
应用场景:用户多次点击提交表单
不用闭包后结构会很简单
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/53780.html
摘要:文件为函数要传入的参数返回事件处理函数添加事件监听节流函数一般用于事件的情况较多,因为这些事件的触发是连续性的,需要在一个时间间隔内只触发一次。 showImg(https://segmentfault.com/img/remote/1460000018998747); 阅读原文 前言 在前端开发当中我们经常会绑定一些事件触发的某些程序执行,有时这些事件会连续触发,如浏览器窗口 s...
摘要:函数的节流当持续触发事件时,保证一定时间段内只调用一次事件处理函数。也就是一个函数执行一次后,只有大于设定的执行周期后才会执行第二次。记忆法让函数执行者冷静下来后不一直抖动后,才真正执行。 1.函数的节流 当持续触发事件时,保证一定时间段内只调用一次事件处理函数。也就是一个函数执行一次后,只有大于设定的执行周期后才会执行第二次。记忆法:联系到水流的流量,我想让你1s只流出多少水你就只能...
摘要:函数的节流当持续触发事件时,保证一定时间段内只调用一次事件处理函数。也就是一个函数执行一次后,只有大于设定的执行周期后才会执行第二次。记忆法让函数执行者冷静下来后不一直抖动后,才真正执行。 1.函数的节流 当持续触发事件时,保证一定时间段内只调用一次事件处理函数。也就是一个函数执行一次后,只有大于设定的执行周期后才会执行第二次。记忆法:联系到水流的流量,我想让你1s只流出多少水你就只能...
阅读 3601·2021-10-12 10:11
阅读 984·2021-09-22 15:42
阅读 3434·2019-08-30 13:06
阅读 880·2019-08-29 17:05
阅读 1621·2019-08-29 12:21
阅读 2352·2019-08-29 11:31
阅读 1106·2019-08-23 18:37
阅读 1230·2019-08-23 14:58