三好街做网站的公司,变色龙app制作教程,珠海网站建设珠海,鸿安建设集团网站目录 防抖
搜索框带来的问题
实现的思路
案例
封装防抖函数
节流
滚动条加载带来的问题
实现的思路
案例
封装节流函数 防抖
搜索框带来的问题
需求#xff1a;根据输入框内容来请求数据
!DOCTYPE html
html langen
head…目录 防抖
搜索框带来的问题
实现的思路
案例
封装防抖函数
节流
滚动条加载带来的问题
实现的思路
案例
封装节流函数 防抖
搜索框带来的问题
需求根据输入框内容来请求数据
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyinput idsearchTxt typesearch placeholder请输入关键字检索scriptdocument.querySelector(#searchTxt).oninput function(){console.log(发送请求当前输入框值,this.value)}/script
/body
/html
上面的代码会带来一个问题用户每输入一个关键字都会触发 现在是要求是用户停下来不输入的时候再触发一次这个时候就需要用到防抖函数了
实现的思路 事件函数执行,先创建个定时器 把逻辑代码放到定时器中 当函数再次触发清除定时器 创建一个新定时器即可
案例 !DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title/headbodyinput idsearchTxt typesearch placeholder请输入关键字检索scriptlet t nulldocument.querySelector(#searchTxt).oninput function(){clearTimeout(t) //有定时器则清除t setTimeout(() {console.log(发送请求当前输入框值,this.value)}, 1000);}/script/body/html 封装防抖函数
!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title/headbodyinput idsearchTxt typesearch placeholder请输入关键字检索scriptdocument.querySelector(#searchTxt).oninput debounce(function(){console.log(发送请求当前输入框值,this.value)})//封装一个公共的防抖函数function debounce(fn){//将函数逻辑放入fn中let t null //此处利用闭包保存定时器return function(){clearTimeout(t) //有定时器则清除t setTimeout(() {//箭头函数指向外面函数的this,而外面函数由input触发fn.call(this) //利用call改变fn的this,否则fn的this为undefined}, 1000);}}/script/body/html
节流
滚动条加载带来的问题
需求页面滚动时,加载数据列表 !DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box{height: 1000px;}/style/headbodydiv classbox/divscriptdocument.onscroll function(){console.log(发送ajax,请求下一页数据)}/script/body/html
上面的代码会带来一个问题用户轻轻下拉滚动条,onscroll中的逻辑会触发很多次 现在是要求是降低触发事件的频率,这个时候就需要用到节流函数了。
实现的思路 事件函数执行,先判断是否有定时器有则直接return 把逻辑代码放到定时器中 定时器执行后置空定时器变量 事件函数执行时再创建一个新的定时器
案例 !DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box{height: 1000px;}/style/headbodydiv classbox/divscriptlet t nulldocument.onscroll function(){if(null ! t) return //关键点1有定时器则returnt setTimeout(() {//关键点2逻辑代码放到定时器中console.log(发送ajax,请求下一页数据)t null //关键点3定时器执行完毕,置空定时器变量}, 500);}/script/body/html
封装节流函数
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box{height: 1000px;}/style
/head
bodydiv classbox/divscriptdocument.onscroll throttle(function () {console.log(发送ajax,请求下一页数据,this)})//封装一个节流函数function throttle(fn) {return function(){ //真正的事件处理函数this:事件源//这里用的是fn.t变量的形式来保存定时器变量if(null ! fn.t) return fn.t setTimeout(() { fn.call(this)
//确保上面的函数中this关键字是事件源如果用fu()调用上面this就变成了windowfn.t null
//置空让事件再次触发的时候重新创建一个定时器}, 500);}}/script
/body
/html
