赞
踩
防抖:在第一次触发事件时,不立即执行函数,而是给出一个限定值,比如200ms,然后:
应用场景:
效果:如果短时间内大量触发同一件事,只会执行一次函数。
防抖函数的核心思路如下:
接下来,就是将思路转成代码:
定义debounce函数要求传入两个参数
通过定时器来延迟传入函数fn的执行
自定义防抖函数:
function debounce(fn, delay) {
var timer = null;
return function () {
if (timer) clearTimeout(timer);
timer = setTimeout(function () {
fn();
},delay)
}
}
假如我们需要获取input框中输入的值,如何获取?我们知道在oninput事件触发时会有参数传递,并且触发的函数中this是指向当前的元素节点的
目前我们fn的执行是一个独立函数调用,它里面的this是window,我们需要将其修改为对应的节点对象,而返回的function中的this指向的是节点对象;
目前我们的fn在执行时是没有传递任何的参数的,它需要将触发事件时传递的参数传递给fn,而我们返回的function中的arguments正是我们需要的参数;
所以我们的代码可以进行如下的优化:
function debounce(fn, delay) {
var timer = null;
return function() {
if (timer) clearTimeout(timer);
// 获取this和argument
var _this = this;
var _arguments = arguments;
timer = setTimeout(function() {
// 在执行时,通过apply来使用_this和_arguments
fn.apply(_this, _arguments);
}, delay);
}
}
节流:
效果:
应用场景:
监听页面的滚定事件
鼠标移动事件
搜索框input事件,要支持实时搜索可以使用节流方案
用户频繁点击按钮操作
游戏中的一些设计
总结:同样是密集的事件触发,但是这次密集事件触发的过程,不会等待最后一次才进行函数调用,而是会按照一定的频率进行调用。
节流函数的默认实现思路采用时间戳的方式来完成:
我们使用一个last来记录上一次执行的时间
每次准备执行前,获取一下当前的时间now:now - last > interval
,函数执行,并且将now赋值给last即可。
基础版:
function throttle(fn, interval) {
var last = 0;
return function () {
// this和arugments
var _this = this;
var _arguments = arguments;
var now = new Date().getTime();
if (now - last > interval) {
fn.apply(_this, _arguments);
last = now;
}
}
}
优化最后执行:
默认情况下,我们的防抖函数最后一次是不会执行的
now - last > interval
满足不了的代码实现:
function throttle(fn, interval) { var last = 0; var timer = null; // 记录定时器是否已经开启 return function () { // this和arguments; var _this = this; var _arguments = _arguments; var now = new Date().getTime(); if (now - last > interval) { if (timer) { //若已经开启,则不需要开启另外一个定时器了 clearTimeout(timer); timer = null; } fn.apply(_this, _arguments); last = now; } else if (timer === null) { // 没有立即执行的情况下,就会开启定时器 //只是最后一次开启 timer = setTimeout(function () { timer = null; // 如果定时器最后执行了,那么timer需要赋值为null fn.apply(_this, _arguments); },interval) } } }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。