一文看懂如何简单实现节流函数和防抖函数-创新互联-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

一文看懂如何简单实现节流函数和防抖函数-创新互联

前言

成都创新互联公司-专业网站定制、快速模板网站建设、高性价比紫金网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式紫金网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖紫金地区。费用合理售后完善,10年实体公司更值得信赖。

在日常开发中有很多场景我们都需要用到节流函数和防抖函数,比如:实现输入框的模糊查询因为需要轮询ajax,影响浏览器性能,所以需要用到节流函数;实现手机号、姓名之类的的验证,往往我们只需要验证一次,这个时候我们就需要用到防抖函数;但是网上的很多资料都是不够具体和便于理解。今天自己翻阅了一些资料之后,来简单的谈谈我对节流函数和防抖函数的理解,希望能帮助大家理解;

节流函数

顾名思义,就是节省流量节省内存性能的一种函数,可以理解为是一种性能优化方案;

举个例子:一个水龙头一直在滴水,可能一次性会滴很多水,但是我们想控制它的频率 ,让它每1000毫秒滴一滴水,这个时候我们就可以用到节流函数来进行控制(简单可以理解为类似于周期性定时器)

js代码(可直接复制到编辑器上看效果):

//首先定义一个全局变量
var canRun = true;
//当浏览器窗口大小发生变化也就是重新计算窗口大小的时候触发
window.onresize = function(){
// 取反,canRun为false的情况下
if(!canRun){
//直接return,后面的代码不执行
 return
}
//走到这来就是canRun为true的情况,然后进行赋值为false
canRun = false

//设置一个定时器进行轮询操作
setTimeout( function () {
//这是要做的事情
 console.log("函数节流")
//最后记得重新赋值true继续让他取反
 canRun = true
//每隔1000毫秒也就是1秒钟就执行一次

 }, 1000)
}

网页标题:一文看懂如何简单实现节流函数和防抖函数-创新互联
本文网址:http://kswsj.cn/article/cosdpo.html

其他资讯