函数截流「防误触」

预计阅读时间: 2 分钟

函数截流 Fun

问题背景

项目中，有一部分需要实现视频点播，同时在视频区域右侧也有一组视频列表，通过点击视频列表项来实现播放的视频源的切换。但是，每次触发点击事件就会触发事件函数。当多次点击的时候会多次触发封装的视频切换函数，从而导致视频解析的时候出现累加、样式未加载完从而导致样式的跑偏，影响了展示效果，也导致视频有声音无视频。为了防止多次点击，想到了函数截流。

封装的截流函数

代码示例

1const Debounce = (fn, t) => {
2	let delay = t || 500;
3	let timer;
4	return function () {
5		let args = arguments;
6		if (timer) {
7			clearTimeout(timer);
8		}
9		timer = setTimeout(() => {
10			timer = null;
11			fn.apply(this, args);
12		}, delay);
13	};
14};

调用 Debounce 函数

代码示例

1/**
2 * switchVideo：切换视频方法
3 * Debounce：截流函数
4 * time：延迟时间，默认500ms
5 * */
6
7switchVideo: Debounce(function (params) {
8	// 使用箭头函数会影响 this 的指向问题
9	this.getVideoInfo(params);
10}, time);

注意「👀」

若多次触发 switchVideo 切换视频方法，则该函数会在点击结束后延迟 time 毫秒之后触发一次要执行的事件处理函数 getVideoInfo，从而解决多次触发事件函数的问题。

#函数截流「防误触」

#函数截流 Fun

#封装的截流函数

#调用 Debounce 函数

函数截流「防误触」

函数截流 Fun

封装的截流函数

调用 Debounce 函数