使用Angular JS中的ng-repeat显示元素10秒+延迟

时间:2016-08-13 02:09:51

标签: javascript angularjs angularjs-ng-repeat nouislider

下面是我用来在客户端显示滑块的代码(从支持的滑块数量)。

从后端获取滑块对象需要 2秒 8秒以显示客户端的滑块元素。

有人可以告诉我如何优化它以保持1秒或更低。以下是我的代码。

以下是html中的代码

(滑块参考:ya-no-ui-slider

<div ng-repeat="(sliderName, commonOptions) in sliders " style="display: flex; align-items: center;" class='col-xs-2'>
    <div class="vertical-slider " ya-no-ui-slider="commonOptions">
    </div>
</div>

下面是我的角度js代码

$scope.sliders = {} 

var commonOptionsSliders ={
   'slider1':{
     start: 0,
     step: 1,
     margin: 20,
     direction: 'rtl',
     orientation: 'vertical',
     range: {'min': 0, 'max': 100},
     tooltips: true
   },
   'slider2':{
     start: 0,
     step: 1,
     margin: 20,
     direction: 'rtl',
     orientation: 'vertical',
     range: {'min': 0, 'max': 100},
     tooltips: true
   }
 }


// Obtaining slider objects from firebase to display on client

var slidersRef = firebase.database().ref('slidersDetails');
$scope.obtainsliders = function(){

  slidersRef.once('value').then(function(dataSnapshot) { // Once the value is obtained from dB execute the below code
    var sliderObjects = dataSnapshot.val();

    if(Object.getOwnPropertyNames(sliderObjects).length !== 0 ){ // Checking if sliderObjects is empty

      for (key in sliderObjects){ // Iterating through sliderObjects
        var sliderObject = sliderObjects[key];
        for (key in sliderObject){
          var sliderDetailsObject = sliderObject[key];
          var sliderName = sliderDetailsObject['sliderName'];
          $scope.sliders[sliderName] = commonOptionsSliders[sliderName]; // Assingning options to the relavent sliders
        }
      }
    }
  });
}

$scope.obtainsliders();

1 个答案:

答案 0 :(得分:0)

通过在事件处理程序的底部添加# A program to test various sorting algorithms. It generates random lists of various sizes, # sorts them, and then tests that: # a. the list is in ascending order # b. the set of elements is the same as the original list # c. record the time taken import random import timeit from unittest import TestCase import matplotlib.pyplot as plt from Sorter import insertionsort, mergesort, quicksort class TestSort(TestCase): def test_sorting(self): times_insertionsort = [] # holds the running times for insertion sort times_quicksort = [] # holds the running times for quick sort times_mergesort = [] # holds the running times for merge sort lengths = [] # holds the array lengths # determine the number of lists to be created for i in range(0, 13): # initialise a new empty list pre_sort = [] # determine the list's length, then populate the list with 'random' data for j in range(0, i * 100): pre_sort.append(random.randint(0, 1000)) # record the length of the list lengths.append(len(pre_sort)) # record the time taken by quicksort to sort the list start_time = timeit.default_timer() post_quicksort = quicksort(pre_sort) finish_time = timeit.default_timer() times_quicksort.append((finish_time - start_time) * 1000) # record the time taken by insertionsort to sort the list start_time = timeit.default_timer() post_insertionsort = insertionsort(pre_sort) finish_time = timeit.default_timer() times_insertionsort.append((finish_time - start_time) * 1000) # record the time taken by mergesort to sort the list start_time = timeit.default_timer() post_mergesort = mergesort(pre_sort) finish_time = timeit.default_timer() times_mergesort.append((finish_time - start_time) * 1000) # check that: # a. the list is in ascending order # b. the set of elements is the same as the original list for k in range(0, len(pre_sort) - 1): self.assertTrue(post_insertionsort[k] in pre_sort) self.assertTrue(post_insertionsort[k] <= post_insertionsort[k + 1]) self.assertTrue(post_mergesort[k] == post_insertionsort[k]) self.assertTrue(post_mergesort[k] == post_quicksort[k]) # plot the results plt.plot(lengths, times_insertionsort, 'r') plt.plot(lengths, times_quicksort, 'g') plt.plot(lengths, times_mergesort, 'b') plt.xlabel('List size') plt.ylabel('Execution time (ms)') plt.show() ,我能够将延迟时间缩短到大约1秒。从https://github.com/btnguyen2k/swift-rsautils

获得的解决方案
$scope.$apply()