js节流

# demo1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<input type="text">
<script>
  var input = document.querySelector('input');
  function fn1(callback,time){
    var flag = true;
    return function(){
      if (flag) {
        flag = false;
        callback();
        setTimeout(()=>{
          flag = true
        },time)
      }
    }
  }
  function fn2(){
    console.log('节流');
  }
  input.addEventListener('input',fn1(fn2,1000))
</script>
</body>
</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

# demo2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="height: 3000px;background-color: black"></div>

<script>
    //节流throttle代码：
    function throttle(fn,delay) {
        let canRun = true; // 通过闭包保存一个标记
        return function () {
            // 在函数开头判断标记是否为true，不为true则return
            if (!canRun) return;
            // 立即设置为false
            canRun = false;
            // 将外部传入的函数的执行放在setTimeout中
            setTimeout(() => {
                // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。
                // 当定时器没有执行的时候标记永远是false，在开头被return掉
                fn.apply(this, arguments);
                canRun = true;
            }, delay);
        };
    }

    function sayHi(e) {
        console.log('节流：', e.target.innerWidth, e.target.innerHeight);
    }
    // 添加在用户调整窗口大小时触发的事件侦听器：
    window.addEventListener('resize', throttle(sayHi,500));
</script>
</body>
</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
32
33
34
35
36

#JavaScript文章

上次更新: 2022/05/12 14:57:53

← TypeScript+koa2+eslint搭建完整nodejs开发环境 js防抖→