vue 实现数据滚动显示_使用Vue观察实现一个简单异步无限滚动效果

无限滚动(Infinite Scroll)是一种很常见的用户体验模式，它建议用户在Web页面或应用程序加载显示很少的内容。当用户开始向下滚动页面时，会加载更多内容。这些内容是通过向负责提供内容的服务器发出请求来异步加载的。在这篇文章中，我将讨论JavaScript的异步操作以及Vue如何实现无限滚动效果。在这个过程中，我们将看到一个使用无限增发动的简单页面。

理解异步操作

在程序中编写一段同步代码，比如下面的例子，有两行代码：L1和L2。如果L1未结速，L2是不会执行的：

console.log('quavo');

console.log('takeoff');

通常情况下，我们会看到上面的代码执行的顺序，那是因为$http.get请求需要一些时间才能从our_url获取data，JavaScript并不会花时间去等，而是在等待$http.get时执行下一行代码。完成它所做的事情，这样就可以在控制台上进行日志记录。异步写代码的方法还包括：

setTimeout()函数，它可以先执行后面的一些事情，然后再执行setTimeout()中的代码。比如：

console.log('我先执行')

setTimeout(() => {

console.log('是的，我等待3s后才执行')

},3000)

console.log('对了，我会第二个执行')

高阶函数(也称为回调函数)是作为参数传递给其他函数的函数。让我们假设有一个名为function X的回调函数，它被当做一个参数传递给另一个函数function Y。最终，函数X被执行或调用内部Y函数。比如下面的代码：

function Y(X) {

$.get("our_url", X);

}

来看一个实例：

var add = function (a, b) {

return a + b;

}

function math (func, array) {

return func(array[0] , array[1]);

}

console.log(math(add, [1, 2])) // => 3

上面的例子中传进去的add是一个参数，而在return的时候刚是一个函数。

高阶函数存在于不同的模式中，很有可能你在不知道的情况下就使用它们。比如window.onclick、setTimeout()和setInterval()。除此之外，还有一些常见的高阶函数例子。比如jQuery ajax回调函数：

$.ajax({

url: '//localhost:8000/api/v1/entry/1',

type: 'GET',

dataType: 'json',

success: function (data) {

// success 接收回调函数

console.log(data)

}

})

setTimeout()和setInterval()这样的计时器函数也是高阶函数：

setTimeout(function (){

console.log('是的，我会在3s后执行')

},3000)

var i = 0;

setInterval(function (){

i++;

console.log(`我现在的值是：${i}`)

}, 100)