JavaScript防抖节流

2022-11-17 111

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： JavaScript防抖节流

闭包

父函数中，返回的子函数

var str= '我是大帅哥'

var OBJ= {

str:'hello world',

getData:function(){

returnfunction(){

returnthis.str

console.log(OBJ.getData()())

输出结果为： 我是大帅哥

原因： this的指向是，由它所在函数调用的上下文决定的，而不是由它所在函数定义的上下文决定的。function fn(){}箭头函数()=>{}中的this，是由它所在函数定义的上下文决定的。

functionfn1{}{

let n=123;

returnfunction(){

console.log(n)

let f1=fu1{}

f1{}

f1保存的是return function(){console.log(n)}这个匿名函数所在堆地址的引用，并不是赋值。

函数防抖

函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

HTML

<body>

<inputtype="text"name=""id="">

<inputtype="submit"name=""id="input">

<script>

var btn =document.getElementById('input')

   btn.addEventListener('click',debounce(submit,2000),false)/

functionsubmit(){

console.log(11)

functiondebounce(fn,timer){

var t =null

returnfunctionbtnevent(){

var firstClick =!t

if(t){clearTimeout(t)}

if(firstClick){

            fn.apply(this,arguments)}

            t= setTimeout(()=>{

                t=null;

            },timer)

</script>

</body>

函数节流（throttle）：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。节流通俗解释就比如我们水龙头放水，阀门一打开，水哗哗的往下流，秉着勤俭节约的优良传统美德，我们要把水龙头关小点，最好是如我们心意按照一定规律在某个时间间隔内一滴一滴的往下滴。

通过设置时间戳

HTML

<body>

<inputtype="text"name=""id="">

<inputtype="submit"name=""id="input">

<script>

var btn =document.getElementById('input')

  btn.addEventListener('click',throttle(submit,2000),false)

functionsubmit(){

console.log(this)

functionthrottle(fn,delay){

var begin = 0

returnfunction(){

var cur = newDate().getTime()

if(cur - begin > delay){

        fn.apply(this,arguments);

                begin=cur;

</script>

</body>