Skip to content
Menu
Yuuk的博客
  • 首页
  • 前端技术
    • JavaScript
    • HTML & CSS
  • SEO
  • 设计
    • 素材分享
    • 设计教程
  • 随笔
Yuuk的博客

JS函数节流的实现

Posted on 2018年6月15日2018年6月19日 by yuuk

引用网上摘抄的一段对函数节流比较通俗的解释。

函数节流背后的基本思想是:某些代码不可以在没有间断的情况下连续重复执行。第一次调用函数,创建一个定时器,在指定的时间间隔之后运行代码,当第二次调用函数时,它会清除前一次的定时器并设置另一个。如果前一次的定时器已经执行过了,这个操作就没有任何意义。然而,如果前一个定时器尚未执行,其实就是将其替换成一个新的定时器。目的是只有在执行函数的请求停止了一段时间之后才执行。

函数定义:

var throttle = function (fn, delay) {
	var startTime = new Date();
	var timer = null;
	return function () {
		var args = arguments;
		var nowTime = new Date()
		if (nowTime - startTime >= delay ) {
			// 不使用清除定时器实现不重复调用是因为这样会导致每次都会执行清除和设置定时器操作,影响性能。
			// clearTimeout(timer); 
			timer = setTimeout(function() {
				return fn.apply(this, args);
			}, delay);
			startTime = nowTime; // 直接设置时间相当,不进到if判断里面即可实现不重复调用。
		}
	}
}

使用方法:

var d = throttle(function(e){
	console.log(e);
}, 500);
document.addEventListener('scroll', d);
打赏赞(1)分享

发表回复 取消回复

您的邮箱地址不会被公开。 必填项已用 * 标注

搜索

近期文章

  • 宝塔面板中使用docker部署nodejs应用
  • 如何将docker镜像上传到阿里云
  • React Native 报错 No bundle URL present 解决方法
  • axios 给每一个请求添加耗时统计
  • css filter属性导致fixed失效

标签

addEventListener ajax ajax跨域 chatAt css居中 DNS缓存 docker gulp ie7 json jsonp margin memcache mysql nodejs ps技巧 typescript void vpn vuejs wampserver webpack win10 XMLHttpRequest z-index 事件冒泡 事件绑定 内容发布时间 图片加载 大写 字符串 封装ajax 广告屏蔽 批量修改图层名称 水平垂直居中 注册码 特殊符号 百度 空元素 站长平台 网页快照 负边界 递减 随机数 首字母

友情链接

  • 蔡甸新闻网
©2025 Yuuk的博客 | 鄂ICP备13014750号-9