wcf 服务被调用两次

Question

我在我的 html 表格上使用无限滚动。这是我用来进行无限滚动的代码

$('#divTable').bind('scroll', function () {
        if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            currentPageNo = currentPageNo + 1;
            myservice(id, pageSize, currentPageNo);


        }
    });

当页面加载时，它会用 100 条记录填充我的表，因为我将 pagesize 传递为 100。当我向下滚动到表底部时，它会调用此代码 myservice(id, pageSize, currentPageNo); 两次。我不明白为什么它调用了两次。

这是我的html

<div id="divTable" style="height: 535px;overflow-y: auto;overflow-x: hidden">
                    <table>
                        <tbody data-bind="foreach: myData">

                            <tr >

                                <td style="padding: 8px;width: 50px;" data-bind="text: Id "></td>

                            </tr>

                        </tbody>
                    </table>

                </div>

Answer 1

当我试图劫持滚动事件并使用它来允许我的用户一次前进一页时，我遇到了类似的问题。在触控板上，您可以使用我所说的“间歇滚动”，这将导致您的事件处理程序触发太多次。

您需要能够识别惯性滚动，并且仅在滚动不是惯性滚动时才运行事件处理程序。

这是一个代码sn-p：

var event = normalizeEvent(event);
  if(event.timeStamp - smartScroll.timeStamp < 50){

    smartScroll.inertia = true;
  }else{

    smartScroll.inertia = false;
  }

根据 smartScroll.inertia 的值，您将确定事件处理程序是否应该做出反应。

您可以在此处选择完整的代码，尽管此处有很多与您的情况无关的代码： http://www.oliverpetkovski.com/javascript/main.js

Answer 2

这是使用我的“智能滚动”代码和可拖动的 jquery 以允许您通过滚动条和鼠标滚轮调用记录的完整答案。

https://github.com/maggiesavovska/knockoutEndlessScroll

注意：如果您仍然看到“intertial scroll”发生，您必须调整第 99 行的 if 语句，增加实际事件时间戳与最后一个滚动事件的时间戳之间的阈值。这将指示滚动是真实的并且是用户意图的还是惯性的。如果这个数字太高，你的用户在尝试一个接一个地快速滚动时会卡住。如果它太低，那么无尽的卷轴会意外前进。这是我指的代码：

if(event.timeStamp - smartScroll.timeStamp < 70)

您还必须确保将数组设置为在敲除中可观察，并使用敲除定义的正确设置方法在每个滚动事件上为其设置值。 http://knockoutjs.com/documentation/observables.html

要了解我在说什么，请参阅视图模型中的第 15 行和我的 smartScroll.scrollEvent 的第 55 行

对于数据，我在 js 文件中创建了一个数据对象，之后您可以在集成服务后将其删除。要使用您的服务，请在代码中搜索注释“//call service”，这是您需要调用服务的地方，传入代码中已经存在的 pageNumber 变量、页面大小并返回数组。

您还需要知道包含数据的数组的全长。这将确定可拖动滚动元素的大小，如果您位于数据的末尾，您可以将滚动元素定位在顶部或底部。在代码中提到 model1.newArray.length 的任何地方，您都必须提供整个数据数组的长度。

集成服务后，搜索 cmets '//start delete later' 并删除从那里到 '//end delete later' 的所有内容。

请记住，model1.curArray 必须使用 setter 设置，而不是使用等号。这就是目前的情况，因此请确保不要更改它。这就是我的意思： 正确（使用 SETTER）：model1.curArray(model1.newArray[model1.pageNumber]); 不正确（使用等号）：model1.curArray = model1.newArray[model1.pageNumber];

部分代码可以优化。如果我能解决它，我会清理它，但它有效。