js节流与防抖
javascript节流、防抖。
知识点:闭包、作用域,arguments、call()、apply()、bind() 的用法。
防抖
事件在n秒后执行触发,如果在n秒内再次触发事件,则重新计时。
<input id="input" type="text">
// 防抖
var debounce = function (fn, delay) {
var timer = null;
return function () {
var that = this;
var args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(that, args)
}, delay)
}
}
var log = debounce(function (e) {
console.log(e.target.value)
}, 3000)
var input = document.getElementById('input')
input.addEventListener('keyup', log)
节流
在固定的时间段内,事件被触发n次都不会执行,时间越过时间段后,事件会执行1次
<input id="input" type="text">
// 节流
var throttle = function (fn, delay) {
var timer = null;
var startTime = Date.now();
return function () {
var that = this;
var args = arguments
var remaining = delay - (Date.now() - startTime)
clearTimeout(timer);
if (remaining <= 0) {
fn.apply(that, args)
startTime = Date.now();
} else {
timer = setTimeout(function () {
fn.apply(that, args)
startTime = Date.now();
}, remaining);
}
}
}
var log = throttle(function (e) {
console.log(e.target.value)
}, 3000)
var input = document.getElementById('input')
input.addEventListener('keyup', log)
参考文章
转载请注明来源:《 js节流与防抖》- rojerYong's Blog
文章链接:https://www.eoway.cn /article/1592820131.html如果此文摘取了你的原创,请联系本站管理员,将对此文修改、删除处理。
--END--
推荐
- 微信小程序打包,主包和分包都小于2m,却上传失败
- 微信公众号网页,微信jssdk需要刷新页面才可以使用
- uniapp 微信小程序背景音频播放 uni.getBackgroundAudioManager()
- uniapp 苹果授权登录
- uniapp app 跳转到微信小程序
- js常用方法
- css 变量
- uniapp 微信公众号网页 打开小程序
- 小程序分享到朋友圈时设置path的query参数,判断用户是否通过朋友圈进入小程序
- uniapp解决原生组件层级过高覆盖页面组件的问题
- js判断是否ie浏览器、ie浏览器版本
- uniapp 设置 APP 首次打开时显示“用户协议和隐私政策”弹框
- uniapp,app端打开第三方应用(高德地图、百度地图、腾讯地图,apple地图进行导航)
- uniapp,ios打开apple地图显示自定义地点信息
- 微信小程序通过map组件获取中心点高精度经纬度以及解决ios系统map组件moveToLocation无效问题
- web性能优化,使用preload和prefetch预加载资源