//防抖(非立即执行)
function debounce_1(fn,wait){
let timerId = null;
return function(){
clearTimeout(timerId);
timerId = setTimeout(() => {
fn.apply(this,arguments)
},wait)
}
}
//防抖(立即执行)
function debounce_2(fn,wait){
let timerId = null;
let flag = true;
return function(){
clearTimeout(timerId);
if(flag){
fn.apply(this,arguments);
flag = false
}
timerId = setTimeout(() => { flag = true},wait)
}
}
//防抖(合并版)
function debounce_merge(fn,wait = 500,isImmediate = false){
let timerId = null;
let flag = true;
if(isImmediate){
return function(){
clearTimeout(timerId);
if(flag){
fn.apply(this,arguments);
flag = false
}
timerId = setTimeout(() => { flag = true},wait)
}
}
return function(){
clearTimeout(timerId);
timerId = setTimeout(() => {
fn.apply(this,arguments)
},wait)
}
}
//防抖(合并版)
export const debounce = function (fn, wait = 500, isImmediate = false) {
// 计时器
let timerId = null;
// flag为真时立即执行
let flag = true;
let resultFunc = null;
if (isImmediate) {
// 立即执行
// 例如:用户在输入框中输入字符,输入第一个字符时,立即执行一次
// 之后,最终间隔超过2秒后,才执行补全查询
resultFunc = function () {
let context = this;
clearTimeout(timerId);
if (flag) {
fn.apply(context, arguments);
flag = false
}
timerId = setTimeout(() => {
flag = true
}, wait)
}
resultFunc.cancel = function () {
// 例如,用户打字很快,然后输入完成后,未达到两秒钟就移动鼠标
// 此时输入框失去焦点,触发取消等待方法,立刻执行补全查询操作并显示结果出来
console.log("立即取消等待")
clearTimeout(timerId);
flag = true;
}
} else {
// 不立即执行
// 例如:用户在输入框中输入字符,最终间隔超过2秒后,才执行补全查询
resultFunc = function () {
let context = this;
clearTimeout(timerId);
timerId = setTimeout(() => {
fn.apply(context, arguments)
}, wait)
}
resultFunc.cancel = function () {
console.log("立即取消等待");
clearTimeout(timerId);
}
}
return resultFunc;
}
//定义函数
//节流(非立即执行)
function throttle_1(fn,wait){
let flag = true;
return function(){
if(flag == true){
flag = false
var timer = setTimeout(() => {
fn.apply(this,arguments)
flag = true
},wait)
}
}
}
//节流(立即执行)
function throttle_2(fn,wait){
var flag = true;
var timer = null;
return function(){
if(flag) {
fn.apply(this,arguments);
flag = false;
timer = setTimeout(() => {
flag = true
},wait)
}
}
}
//节流(合并)
function throttle_merge(fn,wait = 500,isImmediate = false){
let flag = true;
let timer = null;
if(isImmediate){
return function(){
if(flag) {
fn.apply(this,arguments);
flag = false;
timer = setTimeout(() => {
flag = true
},wait)
}
}
}
return function(){
if(flag == true){
flag = false
var timer = setTimeout(() => {
fn.apply(this,arguments)
flag = true
},wait)
}
}
}
//节流(合并)
export const throttle = function (fn, wait = 500, isImmediate = false) {
let flag = true;
let timer = null;
let resultFunc = null;
if (isImmediate) {
// 立即执行
resultFunc = function () {
if (flag) {
fn.apply(this, arguments);
flag = false;
timer = setTimeout(() => {
flag = true
}, wait)
}
}
resultFunc.cancel = function () {
console.log("立即取消等待")
clearTimeout(timer)
}
} else {
// 不立即执行
resultFunc = function () {
if (flag == true) {
flag = false
timer = setTimeout(() => {
fn.apply(this, arguments)
flag = true
}, wait)
}
}
resultFunc.cancel = function () {
console.log("立即取消等待")
clearTimeout(timer);
flag = true;
}
}
return resultFunc;
}
因篇幅问题不能全部显示,请点此查看更多更全内容
Copyright © 2019- ovod.cn 版权所有 湘ICP备2023023988号-4
违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com
本站由北京市万商天勤律师事务所王兴未律师提供法律服务