js-防抖和节流

最新推荐文章于 2022-07-24 00:14:44 发布

莫兮是我

最新推荐文章于 2022-07-24 00:14:44 发布

阅读量103

点赞数

分类专栏：前端 JS 文章标签： js

本文链接：https://blog.csdn.net/u013362192/article/details/115356050

版权

前端同时被 2 个专栏收录

67 篇文章 0 订阅

订阅专栏

59 篇文章 0 订阅

订阅专栏

js-防抖和节流目录

文章目录

前言
推荐阅读
代码展示

前言

防抖：短时时间内大量触发，但只执行一次
- 原理：设置定时器，在指定的x时间后执行事件处理。期间每次触发事件都会重置定时器。
- 目的：n秒内多次点击视为1次
- 应用：地图点击
节流：隔一段时间执行一次，期间多次触发不反应
- 原理：设置定时器，在x时间后执行事件处理，当事件执行完后清除定时器。
- 目的：n秒内只能点击1次
- 应用：文本框输入提交

代码展示

防抖

function debounce (func, delay) {
	let task = null
	return function () {
		if (task) {
			clearTimeout(task)
		}
		task = setTimeout(() => {
			func.apply(this, arguments)
		}, delay)
	}
}

多版本

<!DOCTYPE html>
 
<html>
<!-- 防抖 -->
<!-- 防抖就是在n秒内 防止连续触发，在n秒内触发了下一次，那就重新计算 -->
 
<body>
  <div id="content"
    style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;"></div>
  <script>
    let num = 1;
    let content = document.getElementById('content');
    /**
     *非立即执行版
     **/
    function debounceNoAtOnce(func, wait) {
      let timeout;
      return function () {
        let context = this;
        let args = arguments;
        if (timeout) clearTimeout(timeout);
        timeout = setTimeout(() => {
          func.apply(context, args)
        }, wait);
      }
    };
 
    /**
     *立即执行版
     **/
    function debounceAtOnce(func, wait) {
      let timeout;
      return function () {
        let context = this;
        let args = arguments;
        debugger
        if (timeout) clearTimeout(timeout);
 
        let callNow = !timeout;
        timeout = setTimeout(() => {
          timeout = null;
        }, wait)
 
        if (callNow) func.apply(context, args)
      }
    }
    /**
     *聚合版
     **/
    function debounce(func, wait, immediate) {
      let timeout;
 
      return function () {
        let context = this;
        let args = arguments;
 
        if (timeout) clearTimeout(timeout);
        if (immediate) {
          var callNow = !timeout;
          timeout = setTimeout(() => {
            timeout = null;
          }, wait)
          if (callNow) func.apply(context, args)
        } else {
          timeout = setTimeout(function () {
            func.apply(context, args)
          }, wait);
        }
      }
    }
 
    function count() {
      content.innerHTML = num++;
    };
    content.onmousemove = debounce(count, 1000, true);
  </script>
</body>
<script>
</script>
 
</html>

节流

function throttle (func, delay) {
		let task = null
		return function () {
			if (!task) {
				task = setTimeout (() => {
					task = null
					func.apply(this, arguments)
				}, delay)
			}
		}
}

多版本

<!DOCTYPE html>
 
<html>
<!-- 节流 -->
<!-- 节流是为了固定的时间段内只能点击一次 -->
 
<body>
  <div id="content"
    style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;"></div>

</body>
  <script>
    let num = 1;
    let content = document.getElementById('content');
    /**
     *throttleTime 时间戳版
     **/
    throttleTime = function (func, wait) {
      let previde = 0;
      return function () {
        let nowDate = Date.now();
        if (nowDate - previde > wait) {
          func();
          previde = nowDate;
        }
      }
    }
    /**
     *throttleSet 定时器版
     **/
    throttleSet = function (func, wait) {
      let timeout;
      return function () {
        if (!timeout) {
          timeout = setTimeout(() => {
            timeout = false
            func()
          }, wait)
        }
      }
    }
 
    function count() {
      content.innerHTML = num++;
    };
    content.onmousemove = throttleSet(count, 1000);
  </script>
 
</html>

莫兮是我

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js-防抖和节流

js-防抖和节流目录文章目录前言推荐阅读代码展示防抖多版本节流多版本前言防抖：短时时间内大量触发，但只执行一次原理：设置定时器，在指定的x时间后执行事件处理。期间每次触发事件都会重置定时器。目的：n秒内多次点击视为1次应用：地图点击节流：隔一段时间执行一次，期间多次触发不反应原理：设置定时器，在x时间后执行事件处理，当事件执行完后清除定时器。目的：n秒内只能点击1次应用：文本框输入提交推荐阅读手写实现防抖与节流-codeeJS防抖和节流-Lee代码展示防
复制链接

扫一扫