duanckham · November 4, 2016 06:53
diff --git a/gifhub.js b/gifhub.js
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>Code Demo</title>
 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
 </head>
 <body>

 <div class="stage">
    <div class="scroller"></div>
 </div>

 <style media="screen">
 .stage {
    width: 1500px;
    height: 500px;
    background: #eeeeee;
 }
 .scroller {
    position: relative;
    margin-left: 500px;
    width: 500px;
    height: 500px;
    background: #dddddd;
 }
 .performer {
    position: absolute;
 }
 .performer.l {
    left: -500px;
 }
 .performer.r {
    left: 500px;
 }
 .performer.selected {
    left: 0;
 }
 </style>

 <script>
 // * 代码在 API 请求上有些性能浪费，但几乎可以无视，好处是可以自动规避掉很多问题


 ////////////////////////////////////////////////////////////////////////
 var testData = [];

 for (var i = 0; i < 10000; i++) {
    testData[i] = `Test Data ID ${i}`;
 }

 var api = (offset, limit) => {
    // `http://api.giphy.com/v1/gifs/trending?offset=${offset}&limit=${limit}&api_key=dc6zaTOxFJmzC`
    return testData.slice(offset, offset + limit);
 };

 var ajax = (data, callback) => {
    return callback(data);
 };
 ////////////////////////////////////////////////////////////////////////

 // 无限大的缓存
 var cache = [];

 // 提前在 dom 树里渲染多少
 var preload = 5;

 // 当前偏移
 var offset = 0;

 // 一次从服务器读多少
 var limit = 20;

 var loader = () => {
    console.log('* loader');

    // 当前的 page
    var page = ~~(offset / limit);

    console.log('> prev', (page - 1) * limit, limit);
    console.log('> next', (page + 1) * limit, limit);

    // 自己做边界检查，兄弟

    // 无脑读上一页的数据
    // api?offset=${page - 1}&limit=limit
    // 无脑读下一页的数据
    // api?offset=${page + 1}&limit=limit
    ajax(api((page - 1) * limit, limit), (data) => {
        // 赋值到 cache
        assign(page - 1, data);
    });

    ajax(api((page + 1) * limit, limit), (data) => {
        // 赋值到 cache
        assign(page + 1, data);
    });
 };

 var next = () => {
    console.log('* next');

    // NEDD ANIMATION, MOTHER FUCKER!!!

    // CURRENT => LEFT
    $(`[data-offset=${offset}]`).addClass('l').removeClass('selected');

    // NEXT => SELECTED
    $(`[data-offset=${offset + 1}]`).addClass('selected').removeClass('r');

    // 新的，放到右面
    $('.scroller').append($(`<pre class="performer r" data-offset=${offset + preload}>${cache[offset + preload]}</pre>`));

    // 删掉一个老的
    $(`[data-offset=${offset - preload}]`).remove();

    // ++
    offset++;

    cleaner();
 };

 var assign = (page, data) => {
    console.log('* assign');

    // 赋值，跑一下测试就行了，反正我没跑
    for (var i = 0, j = page * limit; i < limit; i++, j++) {
        // 根据 page 来把刚读到的数据放到正确的位置
        cache[j] = data[i];
    }
 };

 var cleaner = () => {
    console.log('* cleaner');

    // 发现已经读了当前 page 的一半数据了，直接无脑请求新的数据（即使已经请求过了）
    if (offset % limit === limit / 2) {
        loader();
    }

    // 不知道会不会减少内存
    cache[offset - limit - 10] = null;
    cache[offset + limit + 10] = null;
 };

 var init = () => {
    console.log('* init');

    ajax(api(0, limit), (data) => {
        assign(0, data);
    });

    for (var i = 0; i < preload; i++) {
        $('.scroller').append($(`<pre class="performer r" data-offset=${i}>${cache[i]}</pre>`));
    }
 };

 init();
 </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Code Demo</title>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	</head>
	<body>

	<div class="stage">
	<div class="scroller"></div>
	</div>

	<style media="screen">
	.stage {
	width: 1500px;
	height: 500px;
	background: #eeeeee;
	}
	.scroller {
	position: relative;
	margin-left: 500px;
	width: 500px;
	height: 500px;
	background: #dddddd;
	}
	.performer {
	position: absolute;
	}
	.performer.l {
	left: -500px;
	}
	.performer.r {
	left: 500px;
	}
	.performer.selected {
	left: 0;
	}
	</style>

	<script>
	// * 代码在 API 请求上有些性能浪费，但几乎可以无视，好处是可以自动规避掉很多问题


	////////////////////////////////////////////////////////////////////////
	var testData = [];

	for (var i = 0; i < 10000; i++) {
	testData[i] = `Test Data ID ${i}`;
	}

	var api = (offset, limit) => {
	// `http://api.giphy.com/v1/gifs/trending?offset=${offset}&limit=${limit}&api_key=dc6zaTOxFJmzC`
	return testData.slice(offset, offset + limit);
	};

	var ajax = (data, callback) => {
	return callback(data);
	};
	////////////////////////////////////////////////////////////////////////

	// 无限大的缓存
	var cache = [];

	// 提前在 dom 树里渲染多少
	var preload = 5;

	// 当前偏移
	var offset = 0;

	// 一次从服务器读多少
	var limit = 20;

	var loader = () => {
	console.log('* loader');

	// 当前的 page
	var page = ~~(offset / limit);

	console.log('> prev', (page - 1) * limit, limit);
	console.log('> next', (page + 1) * limit, limit);

	// 自己做边界检查，兄弟

	// 无脑读上一页的数据
	// api?offset=${page - 1}&limit=limit
	// 无脑读下一页的数据
	// api?offset=${page + 1}&limit=limit
	ajax(api((page - 1) * limit, limit), (data) => {
	// 赋值到 cache
	assign(page - 1, data);
	});

	ajax(api((page + 1) * limit, limit), (data) => {
	// 赋值到 cache
	assign(page + 1, data);
	});
	};

	var next = () => {
	console.log('* next');

	// NEDD ANIMATION, MOTHER FUCKER!!!

	// CURRENT => LEFT
	$(`[data-offset=${offset}]`).addClass('l').removeClass('selected');

	// NEXT => SELECTED
	$(`[data-offset=${offset + 1}]`).addClass('selected').removeClass('r');

	// 新的，放到右面
	$('.scroller').append($(`<pre class="performer r" data-offset=${offset + preload}>${cache[offset + preload]}</pre>`));

	// 删掉一个老的
	$(`[data-offset=${offset - preload}]`).remove();

	// ++
	offset++;

	cleaner();
	};

	var assign = (page, data) => {
	console.log('* assign');

	// 赋值，跑一下测试就行了，反正我没跑
	for (var i = 0, j = page * limit; i < limit; i++, j++) {
	// 根据 page 来把刚读到的数据放到正确的位置
	cache[j] = data[i];
	}
	};

	var cleaner = () => {
	console.log('* cleaner');

	// 发现已经读了当前 page 的一半数据了，直接无脑请求新的数据（即使已经请求过了）
	if (offset % limit === limit / 2) {
	loader();
	}

	// 不知道会不会减少内存
	cache[offset - limit - 10] = null;
	cache[offset + limit + 10] = null;
	};

	var init = () => {
	console.log('* init');

	ajax(api(0, limit), (data) => {
	assign(0, data);
	});

	for (var i = 0; i < preload; i++) {
	$('.scroller').append($(`<pre class="performer r" data-offset=${i}>${cache[i]}</pre>`));
	}
	};

	init();
	</script>

	</body>
	</html>