实现一个简单的vue无限加载指令方法(2)

上面的例子并没有真正从接口获取数据，所以存在一个隐藏的 bug：当接口响应很慢的情况，滚动到底部正在加载数据时，稍微滚动一下仍会触发获取数据函数，这会造成同时请求多次接口，一次性返回大量数据。

解决办法是添加一个全局变量 scrollDisable，当第一次触发加载数据函数时，将该值设置为 true，根据该值判断是否要执行加载函数。

以普通实现为例：

var scrollDisable = false; window.addEventListener('scroll', function() { var scrollTop = document.body.scrollTop; if(scrollTop + window.innerHeight >= document.body.clientHeight) { // 触发加载数据 if(!scrollDisable) { // loadMore(); } } }); // 表示列表的序号 var index = 10; function loadMore() { // 开始加载数据，就不能再次触发这个函数了 scrollDisable = true; var content = ''; for(var i=0; i< 10; i++) { content += '<li>'+(++index)+'、hello world</li>' } var node = document.getElementById('news'); // 向节点内插入新生成的数据 var oldContent = node.innerHTML; node.innerHTML = oldContent+content; // 插入数据完成后 scrollDisable = false; }