我有一个问题，我在可观察数组上搜索 keyupdate，有时页面会冻结。在逻辑中插入“indexOf”时会发生这种情况。我只想隐藏被过滤掉的对象。它主要发生在我低于 2 个字符时。有 1500 行。另一件事我注意到这只发生在 Chrome 中，但在 IE 中它运行得很快！
JS
var self = this,
intervalId = null;
self.powerSchoolCourses = ko.observableArray([]);
// Stores The Text To Filter The Powerschool Course List
self.powerSchoolCourseSearchText = ko.observable('');
self.powerSchoolCourseSearchText.subscribe(function (searchText) {
if (intervalId)
clearTimeout(intervalId);
intervalId = setTimeout(function () {
var powerSchoolCourses = self.powerSchoolCourses();
ko.utils.arrayForEach(powerSchoolCourses, function(powerSchoolCourse) {
if (searchText.length < 3) {
powerSchoolCourse.visible(true);
} else if (powerSchoolCourse.courseName.toLowerCase().indexOf(searchText) == -1) {
powerSchoolCourse.visible(false);
} else {
powerSchoolCourse.visible(true);
}
});
}, 300);
});
用户界面
<div class="filter">
<div class="input-prepend">
<span class="add-on"><i class="icon-search"></i></span>
<input class="span2" type="text" placeholder="Powerschool Course Name" data-bind="value: powerSchoolCourseSearchText, valueUpdate: 'afterkeydown'" />
</div>
</div>
<!-- ko foreach: powerSchoolCourses -->
<div class="ps-course" data-bind="draggableCourse: {}, css: { 'even-row': $index()%2 }, visible: visible()">
<span class="icon-move"></span>
<span data-bind="html: courseName"></span> (<span data-bind="html: courseNumber"></span>)
<!-- ko foreach: brainHoneyTypesSorted -->
<span class="badge" data-bind="html: $data[0]"></span>
<!-- /ko -->
<a class="icon-plus" data-bind="click: $root.showSections.bind($data), attr: { title: showSections() ? 'Hide Sections' : 'Show Sections' }, css: { 'icon-minus': showSections() }"></a>
</div>
<div class="sections" data-bind="visible: showSections()">
<div class="header">
<!-- ko if: loadingSections() -->
Loading Sections...
<!-- /ko -->
<!-- ko if: !loadingSections() && sections().length == 0 -->
No Sections Found
<!-- /ko -->
<!-- ko if: !loadingSections() && sections().length > 0 -->
Sections
<!-- /ko -->
</div>
<div class="data">
<!-- ko foreach: sections -->
<div class="ps-section" data-bind="css: { 'even-row': $index()%2 }">
<span data-bind="html: schoolName"></span>
<span data-bind="html: teacherLastName"></span>
<span data-bind="html: courseName"></span>
<span data-bind="html: term"></span>
<span data-bind="html: expression"></span>
<span data-bind="html: bhType"></span>
</div>
<!-- /ko -->
</div>
</div>
<!-- /ko -->