关于Js防抖与节流的思考小白知识_优化攻略教程

1,比较正式的解释他们的区别:防抖:就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间,防抖注重结果节流::是让一个函数无法在很短的时间间隔内连续调用,当上一次执行完之后过了规定的时间间隔,才能进行下一次的函数调用,节流注重过程2,非官方解释 防抖:A打了一个B一下,B开始哭(假设哭5分钟),在这5分钟内A一

关于Js防抖与节流的思考小白知识

1,比较正式的解释他们的区别:防抖:就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间,防抖注重结果节流::是让一个函数无法在很短的时间间隔内连续调用,当上一次执行完之后过了规定的时间间隔,才能进行下一次的函数调用,节流注重过程
2,非官方解释 防抖:A打了一个B一下,B开始哭(假设哭5分钟),在这5分钟内A一直打,而B就只为哭A打的第一下,其他的从第二次开始,B就像练了金钟罩一样,抗打ƪ(˘⌣˘)ʃ,但是这5分钟过了之后金钟罩没了,需要A重新打一次,让B哭出来才重新生成金钟罩节流:这就有点像鬼畜了,A一直打,B一直哭,但是每次都是重新哭,类似于诸葛亮说 ‘竟然有如此厚颜无耻之人’,那么我们在暂停与播放之间快速切换就会出现 ‘竟然’  ‘竟然’  ‘竟然’  ‘竟然’  ‘竟然’  ‘竟然’  ‘竟然’  ‘竟然’  ‘有如此厚颜无耻之人’;3,应用场景防抖:窗口 resize时,搜索时需要根据输入框中的内容发送ajax请求时。。。。。。节流:滚动条到达底部(比如要做加载更多)。。。。。。 4,程序实现:

//节流
let time;
let per = 200; //这个是间隔时间,即事件触发到事件回调开始执行的间隔时间。根据业务需求决定
function throtting() {
	if(time) {
		clearTimeout(time)
	}
	time = setTimeout(function() {
		//事件回调的具体方法

	}, per)

}
//防抖
let timelength = 2000; //即在2秒内自第二次开始的其他事件触发都将被忽略
let lasttime = null; //上一次执行的时间点
function debounce() {
	if(!lasttime) {
		lasttime = new Date().getTime()
	} else {
		let curenttime = new Date().getTime();
		if(curenttime - lasttime > 2000) {
			//事件回调的具体方法
			//需将上一次的时间更新↓
			lasttime = curenttime

		} else {
			//时间不够,不做任何操作
			return false

		}
	}
}
海计划公众号
(0)
上一篇 2020/03/26 23:35
下一篇 2020/03/26 23:35

您可能感兴趣的内容

  • Vue.js最佳实践:五招让你成为Vue.js大师小白入门_vue菜鸟教程

    本文面向对象是有一定Vue.js编程经验的开发者。如果有人需要Vue.js入门系列的文章可以在评论区告诉我,有空就给你们写。对大部分人来说,掌握Vue.js基本的几个API后就已经能够正常地开发前端网站。但如果你想更加高效地使用Vue来开发,成为Vue.js大师,那下面我要传授的这五招你一定得认真学习一下了。第一招:化繁为简的Watchers场景还原:cre

    2020/03/22
  • 理解Javascript中的执行上下文和执行栈基础知识_上下文小白入门

    理解Javascript中的执行上下文和执行栈基础知识 总括: 本文深入的讲解了Javascript中的执行上下文和执行栈。 原文地址:Understanding Exe…

    2020/03/20
  • TypeScript 枚举教程视频_枚举使用攻略

    数字类型枚举常规枚举的值都是数字类型,因此被称为数字类型枚举:enum Color {Red,Blue,Green
    }
    console.log(Color.Red);
    // 0
    console.log(Color[0]);
    // Red
    console.log(Color[Color.Red]);
    // Red, Color.Red = 0改变与数字枚举关联

    2020/03/26
  • 不用写代码,也能做好接口测试小白指南_测试作者: 隔壁王书基础知识入门

    本文你将了解到1、接口测试基本概念,包含什么是接口,什么是接口测试,为什么要做接口测试2、接口测试用例设计3、怎样不用写代码,也能快速的根据开发的API文档完成接口自动化测试脚本注:如果你对接口基本概念和接口测试用例已熟悉,可以直接跳过,其实看一遍也无防,就当作温故知新了。适合本文人群1、之前学习接口测试从入门到放弃的初级测试工程师2、想快速完成接口测试脚本

    2020/04/03
  • JavaScript《同源策略》的简单介绍小白基础_同源策略小白入门

    1、概述同源策略是对JavaScript代码能够操作哪些WEB内容的一条完整的安全限制,也是由Netscape提出的一个著名的安全策略。所谓同源简单来说就是“三个相同”,**1、域名相同2、协议相同3、端口相同**当我们使用多个元素或者打开其他浏览器窗口的时候,这一策略就会发挥它的作用,在这种情况下,同源策略负责管理窗口或者窗体中的JavaS

    2020/04/05
  • lory指南教程_一个支持触摸滑动的 JavaScript 滑块

    lory指南教程 官方网址:http://loryjs.github.io/lory/ GitHub:https://github.com/loryjs/lory 简介描述:一个支…

    2020/03/06
  • js、jquery实现省市县三级联动下拉框的功能小白帮助_联动小白指南

    这篇文章主要为大家详细介绍使用原生js、或jquery来实现省市县三级联动下拉框的功能。具有一定的参考价值,感兴趣的小伙伴们可以参考一下原生js的实现

    —请选择省

    2020/04/03
  • pearProject使用说明_一个基于Vue.js实现的项目管理系统

    pearProject使用说明 官方网址:https://beta.vilson.xyz GitHub:https://github.com/a54552239/pearProje…

    2020/03/06
  • docker镜像加速技巧菜鸟教程下载_docker基础指南

    前言由于总所周知的原因,国外很多服务无法访问。比如docker镜像。所以就有了很多国内镜像的说法。配置国内镜像可以极速下载镜像。配置国内镜像有很多人文章教你配置国内docker镜像,这边简单说一下:docker-machine ssh defaultsudo sed -i “s|EXTRA_ARGS=’|EXTRA_ARGS=’–registry-mirr

    2020/03/20
  • JS Tips使用帮助每天推出一个JS技巧

    JS Tips基础入门 官方网址:http://www.jstips.co/ 简介描述:每天推出一个JS技巧

    2020/03/05
  • 来聊聊怎么写react-native上的样式吧入门基础知识_native攻略教程

    我遇到了什么问题?不久之前我重构了一个古老的项目,总结了一些js方面的想法,不过对于一个前端项目而言不仅仅只由js组成的嘛,上学的时候老师和我说HTML+CSS+JS对应的是页面的骨架、皮肤和肌肉。既然骨架我们有了,肌肉也聊完了,今天我们就来聊聊“皮肤”吧。由于我重构的是一个react-native项目,所以我们先来说说在react-native上是怎么写样

    2020/04/05
  • javascript可以爬虫吗?零基础入门_爬虫入门指南

    网络爬虫(又被称为网页蜘蛛,网络机器人),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本。JavaScript爬虫:爬虫,大多人对于爬虫的理解都停留在使用后端语言如Python写的爬虫。但是实际上,使用客户端JavaScript有诸多后端爬虫所无法拥有的优势:可以方便的分享给其他人用,只要对方电脑里有浏览器由于跑在客户端,几乎可以无视对方网站的反爬

    2020/03/20
  • 前端语义化入门基础_语义化入门教程

    一、什么是语义化?语义化是指根据内容的结构化(内容语义化),选择合适的标签(代码语义化),便于开发者阅读和写出更优雅的代码的同时,让浏览器的爬虫和机器很好的解析。二、如何理解语义化?语义化的意图主要在于能让人和机器快熟的理解内容或者代码的含义,用中国的一句俗语来理解就是”见人说人话,见鬼说鬼话”。 例如我们在页面寻找一个标题// 非语义化标签查找
    if(th

    2020/03/30
  • webpack打包原理基础知识教程_打包使用帮助

    什么是 webpack ?本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。webpack 就像一条生产线,要

    2020/03/20
  • 拒绝服务(DoS)攻击:成也矿工,败也矿工入门基础教程_攻击小白帮助

    摘要:我们发现了一种针对类似比特币区块链的拒绝服务攻击,这种攻击模式比之前的攻击模式成本要低得多(只需全网20%算力)。区块链依赖于激励机制来保证系统安全。我们展示了攻击者如何破坏这些激励机制,从而导致理性的挖矿者停止挖矿。自互联网诞生以来,拒绝服务(DoS)攻击问题(也称为洪水攻击)就一直在困扰着互联网。DoS攻击者以各种服务为目标,旨在获取乐趣和利润。最

    2020/03/20
  • mpvue – 美团点评开源的基于 Vue 的微信小程序前端框架菜鸟攻略_mpvue使用教程

    mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。实践案例美团旗下小程序:美团汽车票 和 美团充电,此外,正有一大批小程序正在接入中。快速开始我们精心准备了一

    2020/04/05