* 使用setTimeout

index.html

<html>

<head>

	<meta charset="UTF-8">

	<title>throttle</title>

</head>

<body>

	<h2>函数节流 解决函数被频繁调用、浏览器卡顿的问题</h2>

	<script src="js/throttle.js"></script>

</body>

</html>

　　

js/throttle.js

// 函数节流 解决函数被频繁调用、浏览器卡顿的问题

var throttle = function(fn, interval) {

	var __self = fn,       // 保存需要被延迟执行的函数引用

		timer,             // 定时器

		firstTime = true;  // 是否第1次被调用

	return function() {

		var args = arguments, __me = this;

		// 如果第1次被调用, 不需要延迟执行

		if (firstTime) {

			__self.apply(__me, args);

			return firstTime = false;

		}

		// 如果定时器还在, 说明前一次延迟执行还没有完成

		if (timer) {

			return false;

		}

		// 延迟一段时间执行

		timer = setTimeout(function() {

			clearTimeout(timer);

			timer = null;

			__self.apply(__me, args);

		}, interval || 500);

	}

}

var dom = document.createElement("h1");

dom.innerHTML = 0;

document.body.appendChild(dom);

window.onresize = throttle(function() {

	var n = parseInt(dom.innerHTML);

	dom.innerHTML = ++n;

}, 500);

　　

Run:

php -S 0.0.0.0:9000

调整浏览器窗口大小

javascript 函数节流 throttle 解决函数被频繁调用、浏览器卡顿的问题的更多相关文章

  1. [JavaScript] 函数节流(throttle)和函数防抖(debounce)

    js 的函数节流(throttle)和函数防抖(debounce)概述 函数防抖(debounce) 一个事件频繁触发,但是我们不想让他触发的这么频繁,于是我们就设置一个定时器让这个事件在 xxx 秒 ...

  2. JS中的函数节流throttle详解和优化

    JS中的函数节流throttle详解和优化在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(mousemove),这种事件有一个特点,在一个正常的操作中,有可能在一个短的 ...

  3. js 函数节流throttle 函数去抖debounce

    1.函数节流throttle 通俗解释: 假设你正在乘电梯上楼,当电梯门关闭之前发现有人也要乘电梯,礼貌起见,你会按下开门开关,然后等他进电梯: 但是,你是个没耐心的人,你最多只会等待电梯停留一分钟: ...

  4. js 高程 函数节流 throttle() 分析与优化

    在 js 高程 22.3.3章节 里看到了 函数节流 的概念,觉得给出的代码可以优化,并且概念理解可以清晰些,所以总结如下: 先看 函数节流 的定义,书上原话(斜体表示): 产生原因/适用场景: 浏览 ...

  5. 函数节流throttle和防抖debounce

    throttle 函数节流 不论触发函数多少次,函数只在设定条件到达时调用第一次函数设定,函数节流 1234567891011 let throttle = function(fn,intervalT ...

  6. 解决duilib使用zip换肤卡顿的问题：修改duilib并使用资源文件换肤

    转载请说明原出处,谢谢~~ 今天在做单子是,客户要求做换肤功能,为此我专门写了一个换肤函数,并且把各种皮肤资源压缩为各个zip文件来换肤.但是客户反映程序运行缓慢,我测试后发现的确明显可以看出慢了不少 ...

  7. 解决duilib使用zip换肤卡顿的问题（附将资源集成到程序中的操作方法）

    转载请说明原出处,谢谢~~ 今天在做单子是.客户要求做换肤功能,为此我专门写了一个换肤函数,而且把各种皮肤资源压缩为各个zip文件来换肤.可是客户反映程序执行缓慢,我測试后发现的确明显能够看出慢了不少 ...

  8. 解决MyEclipse启动慢，使用卡顿问题

    卡顿原因: 1.启动的服务和插件过多,导致启动和运行缓慢,电脑配置较差的直接会卡死没有响应 2.软件运行内存设置不足,导致没有足够的空间运行软件,致使软件卡顿 解决方法: windows --> ...

  9. Android ListView只加载当前屏幕内的图片（解决list滑动时加载卡顿）

    最近在做ListView分页显示,其中包括图片 和文字(先下载解析文字内容,再异步加载图片)发现每次点击下一页后,文字内容加载完毕,马上向下滑动,由于这时后台在用线程池异步下载图片,我每页有20条,也 ...

随机推荐

  1. Pytest+Allure 示例

    0. 前言 简介 Allure 框架是一个灵活的.轻量级的.支持多语言的测试报告工具,它不仅以 Web 的方式展示了简介的测试结果,而且允许参与开发过程的每个人可以从日常执行的测试中,最大限度地提取有 ...

  2. NOIP 模拟 $22\; \rm d$

    题解 很好的贪心题 考虑去掉的矩形一定是几个 \(a\) 最小的,几个 \(b\) 最小的,枚举去掉几个 \(a\),剩下的去掉 \(b\) 先对 \(a\) 排序,用小根堆维护 \(b\) ,记录哪 ...

  3. docker部署mysql5-7-31

    快速开始 docker run -itd --name mysql-test -p 3306:3306 -e MYSQL_ROOT_PASSWORD=123456 mysql docker-compo ...

  4. WindowsService开发简单入门

    参考网址: https://www.cnblogs.com/wenlong512/p/7355971.html 一.简介 程序创建在 Windows 会话中,可长时间运行的可执行应用程序.这些服务可以 ...

  5. vue 实现 leaflet的测绘，测距，测面

    参考1:https://blog.csdn.net/lonly_maple/article/details/83658608 参考2:https://blog.csdn.net/xtfge0915/a ...

  6. JS对象创建的几种方法

    最近一直在看JS高级程序设计这本书,有空来梳理一下几种创建对象的方式.话不多说,直接步入正题. 第一种:Object构造函数创建 var Person = new Object(); Person.n ...

  7. 写webpack插件报警告Tapable.plugin is deprecated. Use new API on .hooks instead解决方案，webpack4插件新写法

    最近写了个小插件报了个警告,然后去百度了一下,全都给我说extract-text-webpack-plugin这个插件有问题要更新,我也是无语了,这个插件我用都没用,百度翻了下齐刷刷全是这个答案,搞得 ...

  8. C# 简单粗暴的毫秒转换成 分秒的格式

    C# 简单粗暴的毫秒转换成 分秒的格式 1:code(网络上很多存在拷贝或者存在bug的或者不满足自己的要求) 1 public static string RevertToTime(double m ...

  9. MySQL高可用主从复制简介

    原文转自:https://www.cnblogs.com/itzgr/p/10233932.html作者:木二 目录 一 简介 1.1 概述 二 技术原理 2.1 支持的复制类型 2.2 技术特点 2 ...

  10. Ansible基础使用

    原文转自:https://www.cnblogs.com/itzgr/p/10233932.html作者:木二 目录 一 Ansible命令用法 1.1 免密钥 1.2 Ad-Hoc基础命令 1.3 ...