南强小屋 Design By 杰米
面试的时候我们经常会问别人是理解什么是节流和防抖，严格的可能要求你写出节流和防抖函数，这里我们抛开loadsh工具库手写节流和防抖
1.节流函数throttle
// 节流方案1，每delay的时间执行一次，通过开关控制
function throttle(fn, delay, ctx) {
let isAvail = true
return function () {
let args = arguments // 开关打开时，执行任务
if (isAvail) {
fn.apply(ctx, args)
isAvail = false // delay时间之后，任务开关打开
setTimeout(function () { isAvail = true }, delay)
}
}
}
// 节流方案2，通过计算开始和结束时间
function throttle(fn,delay){
// 记录上一次函数出发的时间
var lastTime = 0
return function(){
// 记录当前函数触发的时间
var nowTime = new Date().getTime()
// 当当前时间减去上一次执行时间大于这个指定间隔时间才让他触发这个函数
if(nowTime - lastTime > delay){
// 绑定this指向
fn.call(this)
//同步时间
lastTime = nowTime
}
}
}
2.防抖debounceTail
2.1）只执行首次
// 防抖 且首次执行
// 采用原理：第一操作触发，连续操作时，最后一次操作打开任务开关（并非执行任务），任务将在下一次操作时触发）
function debounceStart(fn, delay, ctx) {
let immediate = true
let movement = null
return function() {
let args = arguments
// 开关打开时，执行任务
if (immediate) {
fn.apply(ctx, args)
immediate = false
}
// 清空上一次操作
clearTimeout(movement)
// 任务开关打开
movement = setTimeout(function() {
immediate = true
}, delay)
}
}
2.2）只执行最后一次
// 防抖 尾部执行
// 采用原理：连续操作时，上次设置的setTimeout被clear掉
function debounceTail(fn, delay, ctx) {
let movement = null
return function() {
let args = arguments
// 清空上一次操作
clearTimeout(movement)
// delay时间之后，任务执行
movement = setTimeout(function() {
fn.apply(ctx, args)
}, delay)
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
标签：
节流,防抖,函数
南强小屋 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
南强小屋 Design By 杰米
暂无如何在面试中手写出javascript节流和防抖函数的评论...
稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！
昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？