js 认识防抖和节流函数以及实现方法（内含详细注释）

最新推荐文章于 2024-04-29 07:45:00 发布

wyqvong

最新推荐文章于 2024-04-29 07:45:00 发布

阅读量431

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/wyqvong/article/details/105666597

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

防抖

防抖函数，用于一段时间内用户可能会多次触发某一事件但却只需要执行一次函数的情况下。
实现原理：利用闭包创建一个标记来设置一个定时器，约定在xx时间后再触发事件处理函数，当用户每次再次触发事件时，都会重新设置定时器，直到xx时间后才触发事件处理函数。

<body>
  <button id="debounce">点我！</button>

  <script>
    window.onload = function() {
      // 获取按钮，并绑定防抖处理事件
      var Debounce = document.getElementById("debounce");
      Debounce.addEventListener("click", debounce(success,1000));
    }

    // 防抖功能函数，接受传参
    function debounce(fn,wait) {  //非立即执行版
      // 创建一个标记用来存放定时器的返回值
      let timeout = null;
      return function() {
      	let context = this
      	let arg = arguments
        // 每次当用户点击触发的时候，把前一个定时器清除
        if(timeout)clearTimeout(timeout);
        // 然后设置一个新的定时器，
        timeout = setTimeout(() => {
          fn.apply(context , arg );
        }, wait);
      };
    }
	
	function ljdebounce(fn,wait) {  //立即执行版
      // 声明一个标记用来存放定时器的返回值
      let timeout = null;
      return function() {
      	let context = this
      	let arg = arguments
        // 每次当用户点击触发的时候，把前一个定时器清除
        if(timeout)clearTimeout(timeout);
        let callnow = !timeout //判断是否有定时器，没有的话就触发函数
        // 然后设置一个新的定时器，
        timeout = setTimeout(() => {
        	timeout = null
        }, wait);
        if(callnow)fn.apply(context , arg);//第一次触发的时候立即执行
      };
    }

    function success() {
      // 需要防抖的事件处理函数
      console.log("防抖成功！");
    }

  </script>
</body>

节流

节流函数，节流即每隔一段时间就执行一次
实现原理：设置一个定时器并设置xx时间后执行事件，如果时间到了，那么执行函数并重置定时器
节流和防抖的区别在于，防抖每次触发事件都重置定时器，而节流在定时器到时间后再清空重置

// 节流功能函数，接受传参
    function throttle(fn,wait) { 
      // 创建一个标记用来存放定时器的返回值
      let timeout = null
      return function() {
      	let context = this
      	let args = arguments
        // 每次当用户点击触发的时候，若已有存在的定时器则直接跳过
        if(!timeout){
        	//若无定时器，则新建定时器，并在wait后清空定时器并执行事件函数
        	timeout = setTimeout(() => {
        		timeout = null
          		fn.apply(context , args)
        	}, wait)
        }
      }
    }

wyqvong

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js 认识防抖和节流函数以及实现方法（内含详细注释）

防抖防抖函数，用于一段时间内用户可能会多次触发某一事件但却只需要执行一次函数的情况下。实现原理：利用闭包创建一个标记来设置一个定时器，约定在xx时间后再触发事件处理函数，当用户每次再次触发事件时，都会重新设置定时器，直到xx时间后才触发事件处理函数。<body> <button id="debounce">点我！</button> <s...
复制链接

扫一扫

专栏目录