JavaScript防抖节流

简介: JavaScript防抖节流

闭包

父函数中,返回的子函数

JS

1
2
3
4
5
6
7
8
9
10
11
var str= '我是大帅哥'
var OBJ= {
str:'hello world',
getData:function(){
returnfunction(){
returnthis.str
           }
       }
 }
console.log(OBJ.getData()())

输出结果为: 我是大帅哥

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

JS

1
2
3
4
5
6
7
8
functionfn1{}{
let n=123;
returnfunction(){
console.log(n)
}
}
let f1=fu1{}
f1{}

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

函数防抖

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

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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>

目录
相关文章
|
4天前
|
JavaScript
JS封装节流函数
JS封装节流函数
22 0
|
4天前
|
JavaScript
JS中防抖和节流的区别是什么
JS中防抖和节流的区别是什么
24 0
|
4天前
|
JavaScript 前端开发 UED
js的防抖节流
js的防抖节流
11 1
|
4天前
|
JavaScript 前端开发 UED
js的节流
js的节流
14 0
|
4天前
|
测试技术
js_防抖与节流(闭包的使用)
js_防抖与节流(闭包的使用)
18 0
|
4天前
|
JavaScript
|
4天前
|
JavaScript 前端开发
【JavaScript】面试手撕节流
上篇我们讲了防抖,这篇我们就谈谈防抖的好兄弟 -- 节流。这里在老生常谈般的提一下他们两者之间的区别,顺带给读者巩固下。
54 3
|
4天前
|
前端开发 JavaScript UED
【JavaScript】面试手撕防抖
防抖: 首先它是常见的性能优化技术,主要用于处理频繁触发的浏览器事件,如窗口大小变化、滚动事件、输入框内容改变等。在用户连续快速地触发同一事件时,防抖机制会确保相关回调函数在一个时间间隔内只会被执行一次。
40 0
|
4天前
|
JavaScript 前端开发
js的节流和防抖
js的节流和防抖
19 0
|
4天前
|
JavaScript 前端开发 UED