360旋转

最新推荐文章于 2023-09-11 14:55:40 发布

hao555666

最新推荐文章于 2023-09-11 14:55:40 发布

阅读量126

点赞数

分类专栏：笔记文章标签：小结

本文链接：https://blog.csdn.net/hao555666/article/details/123696193

版权

throttle 图片旋转事件处理性能优化 JavaScript

关键词由CSDN通过智能技术生成

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

使用throttle方法
此方法没有this
既然知道在onLoad对象下this是对的，那就用一个全局变量在onLoad中初始化保存一下这个this，然后在pullUp方法中使用这个全局变量进行调用。

在script开头, export default{} 代码块之前,初始化一个变量

let _this= null;

//export default {undefined

在onLoad中进行初始化

onload(){undefined

_this=this;

this.loadData();

}

export const throttle = (func, wait) => {
	var context, args, timeout, result;
	var previous = 0;
	var later = function () {
		previous = new Date();
		timeout = null;
		result = func.apply(context, args);
	};
	return function () {
		var now = new Date();
		var remaining = wait - (now - previous);
		context = this;
		args = arguments;
		if (remaining <= 0) {
				clearTimeout(timeout);
				timeout = null;
				previous = now;
				result = func.apply(context, args);
		} else if (!timeout) {
				timeout = setTimeout(later, remaining);
		}
		return result;
	};
};

360主体旋转

imageTouchmove:throttle((e) => {
	let that = _this;
	if (that.viewing) {
		let self = {
			x: that.touchstart.pageX,
			y: that.touchstart.pageY
		}
		let touch = e.touches[0] || e.changedTouches[0];
		let x = touch.pageX, y = touch.pageY;
		let angle = 180 * Math.atan((y - self.y) / (x - self.x)) / Math.PI;
		if (Math.abs(angle) < 20) {
			let index = that.imageIndex + (x > self.x ? 1 : -1);
			that.$set(that.touchstart, 'pageX', x);
			that.$set(that.touchstart, 'pageY', y);
			console.log(index, that.imagesList.length)
			if (index >= that.imagesList.length) {
					index = 0;
			}
			if (index < 0) {
					index = that.imagesList.length-1;
			}
			if (index != that.imageIndex) {
					that.imageIndex = index;
			}
			e.preventDefault();
		}
	}
	},50),